jquery php melaksanakan kotak carian automatik prompt_jquery

Hari ini tiba-tiba saya ingin membina halaman carian untuk tapak ini, supaya pengguna boleh mencari kandungan kegemaran mereka melalui carian, dan mengelakkan masalah mencari sumber secara manual dalam maklumat besar-besaran. Matlamat saya adalah serupa dengan kesan halaman utama Baidu. Apabila pengguna memasukkan teks yang mereka ingin cari, kami menyediakan sepuluh maklumat yang berkaitan di bawah Jika pengguna mencari salah satu daripada sepuluh maklumat ini, ianya mudah sahaja. Sebab utama adalah untuk mengemas kini halaman yang lebih mesra pengguna dan menjadikannya lebih mudah untuk digunakan oleh pengguna.

Mari lihat pemaparan terlebih dahulu Ini akan memberi anda lebih motivasi, jika tidak, anda tidak akan tahu apa yang saya maksudkan dan kesan yang ingin saya capai!

jquery php menyedari gesaan automatik kotak carian

Yang berikut menerangkan prinsipnya:

Dalam halaman search.html, apabila pengguna memasukkan "j" dalam kotak carian, gunakan javascript untuk mendapatkan kandungan teks kotak carian, cari kandungan yang berkaitan dalam pangkalan data dan kembalikannya, dan kemudian gunakan javascript untuk paparkan keputusan yang dikembalikan oleh pelayan dalam Kotak gesaan di bawah kotak carian adalah untuk pengguna membuat pilihan rujukan.

Kaedah pelaksanaan khusus:

Mula-mula, buat kotak carian, butang carian dan lapisan gesaan carian pada halaman, seperti yang ditunjukkan di bawah

Gunakan pelayar untuk menyemak imbas halaman, dan anda akan melihat kesan seperti yang ditunjukkan di bawah
jquery php melaksanakan gesaan automatik apabila pengguna memasukkan kandungan carian
Ia kelihatan sangat biasa dan tiada gaya Sekarang mari kita buat beberapa pelarasan pada gaya

Laraskan gaya lapisan yang memaparkan gesaan carian Memandangkan lapisan gesaan carian berada betul-betul di bawah kotak carian, kami menetapkan kaedah penentududukannya kepada kedudukan mutlak

Kaedah kedudukan*/
Kemudian gunakan JS untuk meletakkan lapisan gesaan carian terus di bawah kotak carian, dan lebarnya adalah sama dengan kotak carian Di sini kami menggunakan jQuery untuk menyelesaikan masalah

Kedudukan dan lebar lapisan gesaan carian telah ditentukan Memandangkan kotak gesaan tidak akan dipaparkan sebelum pengguna memasukkan teks carian, kita perlu menetapkannya kepada tersembunyi dan menambah paparan pada gaya lapisan gesaan. : tiada yang menyembunyikannya.

Semuanya OK Sekarang kami hanya perlu mendaftarkan acara untuk onkeyup kotak carian Kami masih menggunakan jQuery untuk mengendalikannya

Jadi bagaimanakah pelayan memproses data yang dihantar oleh pelanggan Mari kita gunakan PHP sebagai contoh

Salin kod Kod adalah seperti berikut:

$v=$_POST[nilai];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10"); //Query 10 hasil berkaitan dalam pangkalan data berdasarkan data yang dihantar oleh klien
if(mysql_num_rows($re)<=0) exit('0'); //Nilai keputusan pertanyaan echo '

';
while($ro=mysql_fetch_array($re)) echo '
• '.$ro[title].'
' //Akan Output tajuk hasil yang berkaitan yang diperolehi oleh pertanyaan perlu diberi perhatian Memandangkan teks yang dikembalikan melalui teknologi ajax jQuery adalah dikodkan UTF-8, jika $ro[title] mengandungi bahasa Cina, anda mesti ingat untuk menggunakan iconv PHP atau fungsi lain. Tukarkannya kepada pengekodan UTF-8, jika tidak, apa yang anda lihat pada halaman akan menjadi rentetan aksara yang bercelaru
echo '
• Close '; //Masukkan butang tutup supaya pengguna boleh mengklik untuk menutupnya apabila mereka tidak mahu melihat lapisan gesaan menggunakan jQuery butang yang diklik ialah $(ini). Pergi hingga ke elemen induk ketiganya dan hilangkannya
  echo '

';
?>

Sekarang pelayan boleh melaksanakan data yang kami hantar dengan betul dan mengembalikan hasil yang sepadan Sekarang masukkan teks dalam kotak carian untuk mengujinya, tetapi premisnya ialah mesti ada sesuatu yang berkaitan dengan teks ini dalam kandungan anda. jika tidak, anda tidak akan melihat kotak gesaan muncul kerana tiada kandungan gesaan yang berkaitan, haha.

Tetapi masih ada sedikit cacat, iaitu kandungan dalam kotak prompt tidak cantik gunakan css untuk melaraskan paparan Kesan

Salin kod Kod adalah seperti berikut:

#search_auto li{background:#FFF; text-align:left;} /*Tetapkan kesan tag li dalam kotak gesaan*/
#search_auto li.cls{text-align:right;} /*Tetapkan kesan butang tutup dalam kotak gesaan*/
#search_auto li a{display:block; padding:5px 6px; pointer color:#666;} /*Tetapkan kesan label di bawah label li dalam kotak gesaan*/
#search_auto li a:hover{background:#D8D8D8; text-decoration:none;

Sekarang ia benar-benar siap sepenuhnya Sama ada untuk menyediakan pemprosesan kelewatan atau fungsi lain yang lebih lengkap, terserah kepada rakan-rakan untuk menggunakan otak mereka sendiri. Anda juga boleh membalas pemikiran anda di bawah, dsb. Kod pelanggan lengkap:

Salin kod Kod adalah seperti berikut:

#search{font-size:14px;}
#search .k{padding:2px 1px;lebar:320px;}
#search_auto{border:1px pepejal #817FB2; #search_auto li{background:#FFF; text-align:left;}
#search_auto li.cls{text-align:right;}
#search_auto li a{display:block; padding:5px 6px; cursor:pointer; #search_auto li a:hover{background:#D8D8D8; text-decoration:none;

$(fungsi(){
$('#search_auto').css({'width':$('#search input[name="k"]').width() 4});
$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){
if(data=='0') $('#search_auto').html('').css('display','none');
lain $('#search_auto').html(data).css('display','block');
});
});
});




Kod sebelah pelayan lengkap:

Salin kod

Kod adalah seperti berikut:

$v=$_POST[nilai];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc had 10");
if(mysql_num_rows($re)<=0) exit('0');
echo '

';
while($ro=mysql_fetch_array($re)) echo '
• '.$ro[title].'
';
echo '
• Close ';
  echo '

';
?>

Ia adalah fungsi yang sangat praktikal, dan ia sangat baik dalam meningkatkan pengalaman pengguna dan kemesraan Rakan boleh menggabungkan artikel ini dengan permainan percuma dan menambahnya pada projek mereka sendiri.