Ini adalah salah satu kelemahan dari kode posting: kotak pencarian hampir rusak oleh netizen! Lai Lai Beberapa orang sengaja memasuki ruang, beberapa orang masuk atau 1 = 1, beberapa orang waspada, beberapa orang memasuki html ... dan tampaknya mereka masih bermain, jadi biarkan mereka pergi, selama mereka bahagia.
Dalam proyek, fungsi penyelesaian otomatis dari kotak input sering digunakan, seperti kotak pencarian seperti Baidu dan Taobao: Ketika pengguna memasukkan huruf awal dan kata kunci, latar belakang akan dengan cepat mengembalikan entri terkait dan menampilkannya ke meja depan untuk pengguna untuk memilih dan meningkatkan pengalaman pengguna. Tentu saja, fungsi penyelesaian proyek ini tidak sebanding dengan teknologi produsen besar ini, tetapi lebih dari cukup untuk pencarian di tempat.
Ada dua plug-in penyelesaian otomatis utama yang telah kami hubungi : AutoComplete dan Typeahead . Situs ini menggunakan Typeahead.
jQueryui-autocomplete
Penyelesaian Otomatis Plug-in-Bootstrap-3-Typeh
Keterangan Parameter Terkait:
Sumber: function (kueri, proses) {}. Kueri mewakili string di kotak input teks saat ini. Dalam metode ini, data dapat diminta dari latar belakang (objek JSON dalam bentuk array) melalui Ajax, dan kemudian objek yang dikembalikan digunakan sebagai parameter proses;
formatItem : function (item) {}. Objek JSON spesifik yang mengembalikan data dikonversi menjadi format string, yang digunakan untuk menampilkannya di daftar prompt, dan nilai pengembalian adalah: string;
setValue : function (item) {}. Ketika item pada daftar prompt dipilih, atur nilai yang ditampilkan di kotak input teks dan nilai yang sebenarnya perlu diperoleh. Format Nilai Pengembalian: {'Nilai Data': Item ["Properti item dari nilai yang ditampilkan dalam kotak input"], 'Nilai Nyata': Item ["Item Properti dari nilai aktual yang perlu diperoleh"]}, kemudian, nilai ini dapat diperoleh melalui properti nyata dari kotak input teks;
Item : Jumlah maksimum set hasil untuk prompt penyelesaian otomatis, default: 8;
MinLength: Proses pencocokan akan dilakukan hanya ketika string di kotak input teks saat ini mencapai nilai properti. Default: 1;
Penundaan : Setelah menentukan jumlah penundaan milidetik, data diminta dari latar belakang untuk mencegah permintaan yang sering dari latar belakang sering disebabkan oleh input cepat. Default: 500
Kode spesifiknya adalah sebagai berikut:
Pertama kali memperkenalkan file js
<skrip src = "~/skrip/jQuery-1.9.0.js"> </script> <script src = "~/skrip/bootstrap.js"> </script> <script src = "~/content/js/bootstrap3-typeAhead.js"> </script>
Kode HTML:
<form id="searchform" role="search" target="_blank" method="get" action="/Search/Index"><div><input type="text" id="searchWords" name="searchWords" data-provide="typeahead" autocomplete="off" placeholder="Please enter the keyword to search for"></div><button type="submit" ID = "SearchBtn"> Cari </button> </form>
JS untuk memproses istilah pencarian terkait:
// Cari secara otomatis lengkap; Daftarkan kotak pencarian dengan AutoComplete AutoComplete Penyelesaian Asosiasi Otomatis: function () {jQuery ('#SearchWords'). Typeahead ({Sumber: function (kueri, proses) {// kueri adalah nilai input jQuery.getjson ('/pencarian/gethotsearchitems', {"query": query}, function) {(query (query) (function) {{{query) (function) {{function) {function) {{function) {function) {function) {function) {function) {function) {return item.replace (/<a (.+?) <// a>/, ""); // Pastikan untuk kembali di sini, jika tidak Anda tidak akan menampilkannya}, afterselect: function (item) {// waktu setelah item dipilih, item adalah item yang saat ini dipilih (item); {8, 8, // menunjukkan 8 Delays:Latar belakang pemrosesan/pencarian/gethotsearchitems:
#Region 2.0 jQuery Typeahead plug-in secara asinkron memperoleh kata-kata panas pencarian dan secara otomatis melengkapi kotak pencarian; ActionResult gethotsearchitems () /// <summary> /// 2.0 jQuery typealhead plug-in asinkron memperoleh kata-kata panas pencarian dan secara otomatis melengkapi kotak pencarian> //// setiap kali pencarian, rincian pencarian pengguna termasuk dalam pustaka> /// tabel waktu yang dihitung menghitung jumlah istilah pencarian setiap 10 menit dan memperbarui status pustaka> /// tabel waktu menghitung jumlah istilah pencarian setiap 10 menit dan memperbarui status pustaka> /// tabel waktu menghitung jumlah istilah pencarian setiap menit dan memperbarui status pustaka> /// tabel waktu menghitung jumlah istilah pencarian setiap menit dan memperbarui the statistics> The LIMPLEKR </// COURDR/TUGAS HUBUNGAN Jumlah Pencarian Setiap menit dan memperbarui The Library> The Reverr. <Returns> JSON </ Returns> Public ActionResult getHotsearchitems () {// 2.1 Dapatkan istilah pencarian saat ini "kueri" string kueri = permintaan ["kueri"]; // 2.2 kueri Kata panas bidang ini dari database. Koleksi yang berisi istilah pencarian ini dari database, mengurutkannya berdasarkan pencarian, dan mengembalikan data ke typeead.jslist <EnterRank> hotlist = hotservice.getDataListby (s => s.keyword.contains (query), s => s.searchTimes); if (hotlist! H.SearchTimes}). Tolist (); ArrayList list2 = new arraylist (); int i = 1; foreach (var item dalam daftar1) {list2.add (string.format ("<a class =/" cat/"href =/"#/"> {0} </a> {1}", i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, i, a. Jsonrequestbehavior.allowget);} else {return json ("", jsonrequestbehavior.allowget);} #endregionMari kita lakukan untuk saat ini.