详解PHP如何实现简易的搜索框自动提示功能
如何实现简易的搜索框自动提示功能?本文主要介绍了php+mysql+jquery实现简易的检索自动补全提示功能,涉及基于jQuery的ajax数据库查询与事件动态响应相关操作技巧,需要的朋友可以参考下。希望对大家有所帮助。
具体如下:
这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂。心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下。思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作。
html+jQuery内容:
<html> <head> <style type="text/css"> #autoBox { margin: 0px; padding: 0px; border: 1px solid #CCCCCC; width: 200px; } #autoBox li { clear: both; background-color: white; color: black; position: relative; top: 0px; left: 0px; line-height: 25px; width:200px; text-align: left; overflow: hidden; } #autoBox li:hover { background-color: gray; color: yellow; cursor: pointer; } </style> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ $.ajaxSetup({cache:false}) ; //不缓存 //以下代码用于显示检索提示框 $("#autoBox").hide(); //初始化时隐藏补全提示框 $("#stuSearch").keyup(function(){ //输入框中的keyup事件激活以下查询行为 $("#autoBox").html(""); //先清空补全提示框原有内容 if($("#stuSearch").val().length>0) // 如果输入框不为空 { $.ajax({ //后台调用php文件进行查询 type:"post", url:"phpFiles/stuSearch.php", dataType:"json", data:{keywords:$("#stuSearch").val()}, success:function(feedbackdata) { $("#autoBox").show();// 显示补全提示框 for(i=0;i<feedbackdata.length;i++) //将结果添加到提示框中 { $("#autoBox").append("<li>"+feedbackdata[i]['truename']+"</li>"); } $("#autoBox li").on("click",function(){ //为这些新增的li绑定单击事件,单击后将其值赋到输入框中 $("#stuSearch").val($(this).text()); }) $("#autoBox").append("<li style='text-align:right'>关闭</li>");//在提示框的最后添加一个li用来关闭 $("#autoBox li:last").on("click",function(){ // 添加单击事件,单击后隐藏提示框 $("#autoBox").hide(); }) } }); } }) }) </script> </head> <body> <input type="text" placeholder="输入您想检索的关键词后回车。" id="stuSearch" name="stuSearch"/> <ul id="autoBox"> </ul> </body> </html>
stuSearch.php代码
<?php include '../phpFiles/connMysql.php'; $keywords=$_POST['keywords']; $myrs=mysql_query("select * from users where truename like '".$keywords."%'"); if($myrs) { while($row=mysql_fetch_array($myrs)) { $temp[]=$row; } echo(json_encode($temp)); } ?>
效果图
输入时:
点击某一项后:
相关推荐:
Atas ialah kandungan terperinci 详解PHP如何实现简易的搜索框自动提示功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Jika anda seorang pembangun PHP yang berpengalaman, anda mungkin merasakan bahawa anda telah berada di sana dan telah melakukannya. Anda telah membangunkan sejumlah besar aplikasi, menyahpenyahpepijat berjuta-juta baris kod dan mengubah suai sekumpulan skrip untuk mencapai op

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

JWT adalah standard terbuka berdasarkan JSON, yang digunakan untuk menghantar maklumat secara selamat antara pihak, terutamanya untuk pengesahan identiti dan pertukaran maklumat. 1. JWT terdiri daripada tiga bahagian: header, muatan dan tandatangan. 2. Prinsip kerja JWT termasuk tiga langkah: menjana JWT, mengesahkan JWT dan muatan parsing. 3. Apabila menggunakan JWT untuk pengesahan di PHP, JWT boleh dijana dan disahkan, dan peranan pengguna dan maklumat kebenaran boleh dimasukkan dalam penggunaan lanjutan. 4. Kesilapan umum termasuk kegagalan pengesahan tandatangan, tamat tempoh, dan muatan besar. Kemahiran penyahpepijatan termasuk menggunakan alat debugging dan pembalakan. 5. Pengoptimuman prestasi dan amalan terbaik termasuk menggunakan algoritma tandatangan yang sesuai, menetapkan tempoh kesahihan dengan munasabah,

Rentetan adalah urutan aksara, termasuk huruf, nombor, dan simbol. Tutorial ini akan mempelajari cara mengira bilangan vokal dalam rentetan yang diberikan dalam PHP menggunakan kaedah yang berbeza. Vokal dalam bahasa Inggeris adalah a, e, i, o, u, dan mereka boleh menjadi huruf besar atau huruf kecil. Apa itu vokal? Vokal adalah watak abjad yang mewakili sebutan tertentu. Terdapat lima vokal dalam bahasa Inggeris, termasuk huruf besar dan huruf kecil: a, e, i, o, u Contoh 1 Input: String = "TutorialSpoint" Output: 6 menjelaskan Vokal dalam rentetan "TutorialSpoint" adalah u, o, i, a, o, i. Terdapat 6 yuan sebanyak 6

Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data

Mengikat statik (statik: :) Melaksanakan pengikatan statik lewat (LSB) dalam PHP, yang membolehkan kelas panggilan dirujuk dalam konteks statik dan bukannya menentukan kelas. 1) Proses parsing dilakukan pada masa runtime, 2) Cari kelas panggilan dalam hubungan warisan, 3) ia boleh membawa overhead prestasi.

Apakah kaedah sihir PHP? Kaedah sihir PHP termasuk: 1. \ _ \ _ Membina, digunakan untuk memulakan objek; 2. \ _ \ _ Destruct, digunakan untuk membersihkan sumber; 3. \ _ \ _ Call, mengendalikan panggilan kaedah yang tidak wujud; 4. \ _ \ _ Mendapatkan, melaksanakan akses atribut dinamik; 5. \ _ \ _ Set, melaksanakan tetapan atribut dinamik. Kaedah ini secara automatik dipanggil dalam situasi tertentu, meningkatkan fleksibiliti dan kecekapan kod.
