เมื่อปริมาณข้อมูลไม่ใหญ่และไม่มีส่วนต่อประสานการทำงานที่สอดคล้องกันสำหรับแบ็กเอนด์ฟังก์ชั่นการค้นหาง่าย ๆ บางอย่างจะถูกนำไปใช้โดยส่วนหน้า ฉันเคยใช้มันเมื่อเร็ว ๆ นี้ ฉันเขียนหนึ่งและโพสต์เพื่อแบ่งปันกับคุณ:
ภาพการทำซ้ำ:
ฟังก์ชั่นคำอธิบาย:
หลังจากกดแป้นพิมพ์ให้ค้นหาอักขระจีนในเวลาและพินอินและหมายเลขที่สอดคล้องกับอักขระจีน
แนวคิดการใช้งาน:
ก่อนที่จะแปลงอักขระจีนในการเข้าเป็นพินอินจากนั้นประกบกับตัวละครจีนพินอินและตัวเลขเป็นสตริงปกติและนำไปใส่ในอาร์เรย์ จากนั้นหลังจากกดแป้นพิมพ์แล้วให้ตรวจสอบว่าค่าในอินพุตเป็นอักขระภาษาจีนพินอินหรือหมายเลขจากนั้นวนอาร์เรย์ตามกฎที่คงที่เพื่อให้สามารถพบรายการที่เกี่ยวข้องได้
เปิดใช้งาน:
// การค้นหาทดสอบ --- ---> div ด้านนอกสุด
// Search-Value ---> อินพุตกล่องอินพุต
// search-value-list ---> ผลการค้นหาแสดง div
// search-li ---> รายการค้นหา
ใหม่ search_Engine ("การทดสอบ-ทดสอบ-inner", "ค่าค้นหา", "รายการค้นหา-ค่า", "search-li");
หมายเหตุ: รายการการค้นหาเป็นบวกข้อมูลชั่วคราวสองข้อมูลข้อมูลชื่อและโทรศัพท์เพื่อจัดเก็บอักขระและตัวเลขภาษาจีน
หมายเหตุ: ปลั๊กอินที่เรียกว่า jQuery.hz2py-min.js ใช้ในการแปลงพินอิน เนื่องจากปลั๊กอินนี้สามารถแปลงค่าในอินพุตเท่านั้นจึงมีขั้นตอนพิเศษในรหัสก่อนที่จะใส่ค่าลงในอินพุตชั่วคราวจากนั้นแปลง
html:
การคัดลอกรหัสมีดังนี้:
<div>
<div>
<อินพุต type = "text" placeolder = "search">
<ul></ul>
</div>
<div>
<ul>
<li data-name = "Warrior" data-Phone = "13914157895">>
<span> 13914157895 </span>
<span> นักรบ </span>
</li>
<li data-name = "pastor" data-Phone = "15112357896">>
<span> 15112357896 </span>
<span> ศิษยาภิบาล </span>
</li>
<li data-name = "ขโมย" data-phone = "13732459980">
<span> 13732459980 </span>
<span> ขโมย </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> ลิง </span>
</li>
<li data-name = "neutenant" data-phone = "13815963258">
<span> 13815963258 </span>
<span> ตัวช่วยสร้าง Neutenant </span>
</li>
<li data-name = "paladin" data-phone = "13815934258">
<span> 13815934258 </span>
<span> Paladin </span>
</li>
</ul>
</div>
</div>
CSS:
การคัดลอกรหัสมีดังนี้:
* {padding: 0; มาร์จิ้น: 0; -
ol, ul {list-style: none; -
ร่างกาย {ตัวอักษรขนาด: 12px; สี:#333; -
.Search-test-inner {margin: 100px auto; Padding: 10px; ความกว้าง: 400px; ความเป็นมา: #E0E0E0; แนวชายแดน: 10px; Box-Shadow: 1px 2px 6px #444; -
.Search-Val-inner {มาร์จิ้น-ด้านล่าง: 20px; Padding: 10px; ความเป็นมา: #FFF; -
.Member-List-inner .Search-li {padding: 10px; -
.Search-Value-List {margin-top: 10px; -
.Search-Value-List Li {padding: 5px; -
สมาชิก
.Search-Value-List Li .Phone {float: ขวา; -
.Search-Value {Width: 100%; ความสูง: 30px; ระดับความสูง: 30px; -
.TIPS {FONT-WEIGHT: BOLD; -
JS:
การคัดลอกรหัสมีดังนี้:
// ----------------------------------------------- 【การเริ่มต้น】
function search_engine (dom, searchinput, searchResultinner, searchList) {
// อาร์เรย์ของอักขระพินอิน + จีน + ตัวเลข
this.searchMemberarray = [];
// ลา
this.dom = $ ("." + dom);
// กล่องค้นหา
this.searchInput = "." + SearchInput;
// กล่องผลลัพธ์การค้นหา
this.searchResultInner = this.dom.find ("." + searchResultinner);
// รายการค้นหาวัตถุ
this.searchList = this.dom.find ("." + searchlist);
// แปลงเป็นพินอินและบันทึกเป็นอาร์เรย์
this.transformpinyin ();
// เหตุการณ์การค้นหาที่มีผลผูกพัน
this.SearchactiveEvent ();
-
search_engine.prototype = {
// ---------------------------------------- [แปลงเป็นพินอินและบันทึกพินอินอักขระจีนและตัวเลขเป็นอาร์เรย์]
transformpinyin: function () {
// จัดเก็บวัตถุข้อมูลชั่วคราว
$ ("body"). ผนวก ('<อินพุต type = "text">');
var $ pinyin = $ ("input.pingying-box");
สำหรับ (var i = 0; i <this.searchlist.length; i ++) {
// จัดเก็บชื่อและแปลงเป็นพินอิน
$ pinyin.val (this.searchlist.eq (i) .attr ("data-name"));
// แปลงอักขระภาษาจีนเป็นพินอิน
var pinyin = $ pinyin.topinyin (). toLowerCase (). แทนที่ (/s/g, "");
// ตัวละครจีน
var cncharacter = this.searchlist.eq (i) .attr ("data-name");
//ตัวเลข
var digital = this.searchlist.eq (i) .attr ("data-phone");
// บันทึกในอาร์เรย์
this.SearchMemberArray.push (Pinyin + "&" + Cncharacter + "&" + ดิจิตอล);
-
// ลบวัตถุข้อมูลการจัดเก็บชั่วคราว
$ pinyin.remove ();
-
// ----------------------------- [คำค้นหาการค้นหาฟัซซี่]
Fuzzysearch: ฟังก์ชั่น (ประเภท, val) {
var s;
var returnArray = [];
// พินอิน
if (type === "pinyin") {
s = 0;
-
// ตัวละครจีน
อื่นถ้า (type === "cncharacter") {
s = 1;
-
//ตัวเลข
อื่นถ้า (type === "ดิจิตอล") {
s = 2;
-
สำหรับ (var i = 0; i <this.searchMemberarray.length; i ++) {
// รวมอักขระ
if (this.searchMemberArray [i] .split ("&") [s] .indexof (val)> = 0) {
returnarray.push (this.searchmemberarray [i]);
-
-
returnarray;
-
// --------------------------- [ผลการค้นหาเอาต์พุต]
PostmemberList: ฟังก์ชั่น (Temparray) {
var html = '';
// มีผลการค้นหา
if (temparray.length> 0) {
html + = '<li> ผลการค้นหา (' + temparray.length + ') </li>';
สำหรับ (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>';
-
-
// ไม่มีผลการค้นหา
อื่น{
if ($ (this.searchinput) .val ()! = "") {
html += '<li> ไม่มีผลการค้นหา ... </li>';
}อื่น{
this.searchresultinner.html ("");
-
-
this.searchresultinner.html (html);
-
// ------------------------- [เหตุการณ์การค้นหาที่มีผลผูกพัน]
SearchactiveEvent: function () {
var searchEngine = this;
$ (เอกสาร) .on ("keyup", this.searchinput, function () {
// จัดเก็บอาร์เรย์ที่พบชั่วคราว
var temparray = [];
var val = $ (นี่) .val ();
// กฎปกติสำหรับการตัดสินพินอิน
var pinyinrule = /^[a-za-z]+$ /;
// กฎสำหรับการตัดสินตัวละครจีน
var cncharacterRule = ใหม่ regexp ("^[/u4e00-/u9fff]+$", "g");
// ความสม่ำเสมอของการตัดสินจำนวนเต็ม
var digitalRule = /^ [-+ เหมือน?
// ค้นหาเฉพาะ 3 สถานการณ์
// พินอิน
if (pinyinrule.test (val)) {
Temparray = SearchEngine.FuzzySearch ("Pinyin", Val);
-
// ตัวละครจีน
อื่นถ้า (cncharacterrule.test (val)) {
Temparray = SearchEngine.fuzzysearch ("Cncharacter", Val);
-
//ตัวเลข
อื่นถ้า (digitalRule.test (val)) {
temparray = searchEngine.fuzzysearch ("ดิจิตอล", val);
-
อื่น{
SearchEngine.SearchResultinner.html ('<li> ไม่มีผลการค้นหา ... </li>');
-
SearchEngine.postMemberList (Temparray);
-
-
-
เอฟเฟกต์ดีมากหรือไม่? เพื่อนสามารถใช้มันในโครงการของพวกเขาหลังจากทำให้สวยงาม