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
#search{font-size:14px;}
#search .k{padding:2px 1px width:320px;} /*Tetapkan lebar kotak carian lebih besar*/
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
$('#search_auto').css({'width':$('#search input[name="k"]').width() 4});
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
$.post('search_auto.php',{'value':$(this).val()},function(data){ //Hantar data post ke search_auto.php pada pelayan, $.post ialah kaedah jQuery
if(data=='0') $('#search_auto').html('').css('display','none'); //Nilai data yang dikembalikan pada pelayan , ini bermakna tiada kandungan berkaitan yang ditemui, jadi jelas dan sembunyikan kandungan kotak gesaan
else $('#search_auto').html(data).css('display','block'); //Jika data yang dikembalikan pada pelayan tidak sama dengan 0, masukkan kandungan yang dikembalikan ke dalam kotak gesaan dan paparan Kotak gesaan
});
});
Jadi bagaimanakah pelayan memproses data yang dihantar oleh pelanggan Mari kita gunakan PHP sebagai contoh
$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 '
- ';
- '.$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
- 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 '
while($ro=mysql_fetch_array($re)) echo '
echo '
?>
Tetapi masih ada sedikit cacat, iaitu kandungan dalam kotak prompt tidak cantik gunakan css untuk melaraskan paparan Kesan
#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;
#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;