Ketika volume data tidak besar dan tidak ada antarmuka fungsional yang sesuai untuk backend, beberapa fungsi pencarian sederhana pada dasarnya diimplementasikan oleh frontend. Saya kebetulan menggunakannya baru -baru ini. Saya menulis satu dan mempostingnya untuk dibagikan dengan Anda:
Gambar reproduksi:
Deskripsi Fungsi:
Setelah menekan keyboard, cari karakter Cina dalam entri dalam waktu, dan pinyin dan angka yang sesuai dengan karakter Cina;
Ide Implementasi:
Pertama -tama konversi karakter Cina dalam entri ke Pinyin, lalu sambungkan karakter Cina, pinyin dan bilangan ke string biasa dan masukkan ke dalam array. Kemudian, setelah menekan keyboard, tentukan apakah nilai input adalah karakter Cina, pinyin, atau angka, dan kemudian lilitkan array sesuai dengan aturan tetap, sehingga entri yang sesuai dapat ditemukan;
Diaktifkan:
// pencarian-test-inner ---> Div paling luar
// pencarian-nilai ---> kotak input input
// pencarian-nilai-daftar ---> Hasil pencarian menunjukkan div
// cari-li ---> entri pencarian
search_engine baru ("pencarian-test-dalam", "nilai pencarian", "nilai-pencarian-daftar", "pencarian-li");
Catatan: Entri pencarian ditambah dua data sementara, nama data dan telepon data, untuk menyimpan karakter dan angka Cina.
Catatan: Plug-in yang disebut jQuery.hz2py-min.js digunakan untuk mengonversi pinyin. Karena plug-in ini hanya dapat mengonversi nilai dalam input, ada langkah tambahan dalam kode, pertama-tama masukkan nilainya menjadi input sementara, dan kemudian konversinya.
Html:
Salinan kode adalah sebagai berikut:
<div>
<div>
<input type = "text" placeholder = "search">
<ul> </ul>
</div>
<div>
<ul>
<li data-name = "prajurit" data-phone = "13914157895">
<span> 13914157895 </span>
<span> prajurit </span>
</li>
<li data-name = "pastor" data-phone = "15112357896">
<span> 15112357896 </span>
<span> Pastor </span>
</li>
<li data-name = "pencuri" data-phone = "13732459980">
<span> 13732459980 </span>
<span> pencuri </span>
</li>
<li data-name = "druid" data-phone = "18015942365">
<span> 18015942365 </span>
<span> druid </span>
</li>
<Li Data-name = "Monk" Data-Phone = "15312485698">
<span> 15312485698 </span>
<span> monyet </span>
</li>
<Li Data-name = "neutenant" data-phone = "13815963258">
<span> 13815963258 </span>
<span> Wizard netnant </span>
</li>
<li data-name = "paladin" data-phone = "13815934258">
<span> 13815934258 </span>
<span> paladin </span>
</li>
</ul>
</div>
</div>
CSS:
Salinan kode adalah sebagai berikut:
* {padding: 0; Margin: 0; }
ol, ul {List-style: tidak ada; }
body {font-size: 12px; Warna:#333; }
.search-test {margin: 100px auto; padding: 10px; Lebar: 400px; Latar belakang: #e0e0e0; Border-Radius: 10px; Kotak-Shadow: 1px 2px 6px #444; }
.search-val-inner {margin-bottom: 20px; padding: 10px; Latar belakang: #FFF; }
.member-list-in .search-li {padding: 10px; }
.search-value-list {margin-top: 10px; }
.search-value-list Li {padding: 5px; }
.Member-List-Inner .Search-Li .phone,
.search-value-list Li .phone {float: right; }
.search-value {width: 100%; Tinggi: 30px; Line-Height: 30px; }
.tips {font-weight: bold; }
JS:
Salinan kode adalah sebagai berikut:
// --------------------------------------------------- 【Inisialisasi】
fungsi search_engine (DOM, SearchInput, SearchResultinner, SearchList) {
// Array Pinyin + Karakter Cina + Angka
this.searchmemberarray = [];
// keledai
this.dom = $ ("." + dom);
// kotak pencarian
this.searchInput = "." + searchInput;
// kotak hasil pencarian
this.searchResultinner = this.dom.find ("." + SearchResultinner);
// daftar pencarian objek
this.searchlist = this.dom.find ("." + SearchList);
// Konversi ke pinyin dan simpan menjadi array
this.transformpinyin ();
// acara pencarian yang mengikat
this.searchactiveEvent ();
}
Search_engine.prototype = {
// -------------------------------------------- [Konversi ke pinyin dan simpan pinyin, karakter Cina, dan angka menjadi array]
TransformPinyin: function () {
// Simpan sementara objek data
$ ("body"). append ('<input type = "text">');
var $ pinyin = $ ("input.pingying-box");
untuk (var i = 0; i <this.searchlist.length; i ++) {
// penyimpanan namanya dan ubah menjadi pinyin
$ pinyin.val (this.searchlist.eq (i) .attr ("data-name"));
// Konversi karakter Cina menjadi pinyin
var pinyin = $ pinyin.topinyin (). Tolowercase (). REPLACE (/S/G, "");
// Karakter Cina
var cncharacter = this.searchlist.eq (i) .attr ("data-name");
//nomor
var digital = this.searchlist.eq (i) .attr ("data-ponsel");
// Simpan dalam array
this.searchmemberarray.push (pinyin + "&" + cncharacter + "&" + digital);
}
// Hapus objek data penyimpanan sementara
$ pinyin.remove ();
},
// --------------------------------- [Kata kunci pencarian fuzzy]
Fuzzysearch: function (type, val) {
var s;
var returnArray = [];
// pinyin
if (type === "pinyin") {
s = 0;
}
// Karakter Cina
lain jika (type === "cncharacter") {
s = 1;
}
//nomor
lain jika (type === "digital") {
s = 2;
}
untuk (var i = 0; i <this.searchmemberarray.length; i ++) {
// Sertakan karakter
if (this.searchmemberarray [i] .split ("&") [s] .indexof (val)> = 0) {
returnarray.push (this.searchmemberarray [i]);
}
}
Return Returnarray;
},
// ------------------------------- [Hasil Pencarian Output]
Postmemberlist: Function (Temparray) {
var html = '';
// Ada hasil pencarian
if (temparray.length> 0) {
html + = '<li> hasil pencarian (' + temparray.length + ') </li>';
untuk (var i = 0; i <temparray.length; i ++) {
var Sarray = Temparray [i] .split ("&");
html += '<li>';
html + = '<span>' + Sarray [2] + '</span>';
html + = '<span>' + Sarray [1] + '</span>';
html += '</li>';
}
}
// Tidak ada hasil pencarian
kalau tidak{
if ($ (this.searchInput) .val ()! = "") {
html += '<li> Tidak ada hasil pencarian ... </li>';
}kalau tidak{
this.searchResultinner.html ("");
}
}
this.searchResultinner.html (html);
},
// ----------------------------- [Acara Pencarian Mengikat]
SearchactiveEvent: function () {
var searchengine = ini;
$ (dokumen) .on ("keyup", this.searchInput, function () {
// Simpan sementara array yang ditemukan
var temparray = [];
var val = $ (ini) .val ();
// Aturan reguler untuk menilai pinyin
var pinyinrule = /^[a-za-z]+$ /;
// Aturan untuk menilai karakter Cina
var cncharacterrule = regexp baru ("^[/u4e00-/u9fff]+$", "g");
// keteraturan penilaian bilangan bulat
var digitalrule = /^ media-+ media?d+(.d+)?$/;
// Cari hanya 3 situasi
// pinyin
if (pinyinrule.test (val)) {
temparray = Searchengine.fuzzysearch ("pinyin", val);
}
// Karakter Cina
lain jika (cncharacterrule.test (val)) {
temparray = Searchengine.fuzzysearch ("cncharacter", val);
}
//nomor
lain if if (digitalrule.test (val)) {
temparray = Searchengine.fuzzysearch ("digital", val);
}
kalau tidak{
searchengine.searchResultinner.html ('<li> Tidak ada hasil pencarian ... </li>');
}
searchengine.postmemberlist (Temparray);
});
}
};
Apakah efeknya sangat bagus? Teman dapat menggunakannya dalam proyek mereka setelah mempercantiknya