عندما لا يكون حجم البيانات كبيرًا ولا توجد واجهة وظيفية مقابلة للواجهة الخلفية ، يتم تنفيذ بعض وظائف البحث البسيطة بشكل أساسي بواسطة الواجهة الأمامية. صادفت استخدامه مؤخرًا. كتبت واحدة ونشرتها لمشاركتها معك:
صورة التكاثر:
وصف الوظيفة:
بعد الضغط على لوحة المفاتيح ، ابحث عن الأحرف الصينية في الإدخال في الوقت المناسب ، والرقم المقابل للأحرف الصينية ؛
أفكار التنفيذ:
أولاً ، قم بتحويل الأحرف الصينية في الدخول إلى Pinyin ، ثم يقوم بصق الأحرف الصينية ، والأرقام والأرقام إلى سلاسل عادية ووضعها في صفيف. بعد ذلك ، بعد الضغط على لوحة المفاتيح ، حدد ما إذا كانت القيمة في الإدخال هي حرف صيني ، أو بينيين ، أو الرقم ، ثم حلقة الصفيف وفقًا لقاعدة ثابتة ، بحيث يمكن العثور على الإدخال المقابل ؛
ممكّن:
// Search-Test-Inner ---> Div الأقصى
// search-value ---> مربع إدخال الإدخال
// search-value-list ---> نتائج البحث تظهر div
// search-li ---> إدخال البحث
New Search_engine ("Search-Test-Inner" ، "Search-Value" ، "Search-Value-List" ، "Search-Li") ؛
ملاحظة: إدخال البحث هو بالإضافة إلى بيانات مؤقتة ، اسم البيانات وهاتف البيانات ، لتخزين الأحرف والأرقام الصينية.
ملاحظة: يتم استخدام مكون إضافي يسمى jQuery.hz2py-min.js لتحويل Pinyin. نظرًا لأن هذا المكون الإضافي لا يمكنه تحويل القيم إلا في الإدخال ، فهناك خطوة إضافية في الكود ، وضع القيمة أولاً في إدخال مؤقت ، ثم تحويله.
HTML:
نسخة الكود كما يلي:
<viv>
<viv>
<type type = "text" placeholder = "search">
<ul> </ul>
</div>
<viv>
<ul>
<li data-name = "Warrior" data-phone = "13914157895">
<span> 13914157895 </span>
<span> Warrior </span>
</li>
<li data-name = "pastor" data-phone = "15112357896">
<span> 15112357896 </span>
<span> القس </span>
</li>
<li data-name = "thieves" 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> Monkey </span>
</li>
<li data-name = "neterenant" data-phone = "13815963258">
<span> 13815963258 </span>
<span> معالج محايد </span>
</li>
<li data-name = "paladin" data-phone = "13815934258">
<span> 13815934258 </span>
<span> بالادين </span>
</li>
</ul>
</div>
</div>
CSS:
نسخة الكود كما يلي:
* {padding: 0 ؛ الهامش: 0 ؛ }
ol ، ul {list-style: none ؛ }
الجسم {font-size: 12px ؛ اللون:#333 ؛ }
.Search-Test-Inner {Margin: 100px Auto ؛ الحشو: 10 بكسل ؛ العرض: 400 بكسل ؛ الخلفية: #e0e0e0 ؛ الحدود الحدودية: 10px ؛ box-shadow: 1px 2px 6px #444 ؛ }
.Search-val-Inner {margin-bottom: 20px ؛ الحشو: 10 بكسل ؛ الخلفية: #fff ؛ }
.Member-List-Inner .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 {العرض: 100 ٪ ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ }
.tips {font-weight: Bold ؛ }
JS:
نسخة الكود كما يلي:
// ----------------------------------------------- 【التهيئة】
Function Search_engine (DOM ، SearchInput ، SearchResultinner ، SearchList) {
// صفائف Pinyin + الأحرف الصينية + الأرقام
this.SearchMemberArray = [] ؛
// الحمير
this.dom = $ ("." + dom) ؛
// مربع البحث
this.searchInput = "." + SearchInput ؛
// مربع نتائج البحث
this.searchResultinner = this.dom.find ("." + searchResultinner) ؛
// قائمة البحث عن الكائنات
this.searchList = this.dom.find ("." + searchList) ؛
// تحويل إلى Pinyin وحفظه في صفيف
this.transformpinyin () ؛
// حدث البحث الملزم
this.SearchActiveEvent () ؛
}
Search_engine.prototype = {
// -------------------------------------------- [تحويل إلى Pinyin وحفظ Pinyin ، الأحرف الصينية ، والأرقام في صفيف]
transformpinyin: function () {
// تخزين كائنات البيانات مؤقتًا
$ ("body"). إلحاق ('<input type = "text">') ؛
var $ pinyin = $ ("input.ping-box") ؛
لـ (var i = 0 ؛ i <this.searchlist.length ؛ i ++) {
// تخزين الاسم وتحويله إلى pinyin
$ pinyin.val (this.searchlist.eq (i) .Attr ("data-name")) ؛
// تحويل الأحرف الصينية إلى Pinyin
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 + "&" + digital) ؛
}
// حذف كائن بيانات التخزين المؤقت
$ pinyin.remove () ؛
} ،
// --------------------------------- [كلمات رئيسية بحث غامضة]
FuzzySearch: Function (type ، val) {
var s ؛
var returnarray = [] ؛
// Pinyin
if (type === "pinyin") {
s = 0 ؛
}
// الشخصية الصينية
آخر إذا (type === "cncharacter") {
S = 1 ؛
}
//رقم
آخر إذا (type === "Digital") {
s = 2 ؛
}
لـ (var i = 0 ؛ i <this.searchmemberarray.length ؛ i ++) {
// تشمل الشخصيات
if (this.searchmemberarray [i] .split ("&") [s] .indexof (val)> = 0) {
returnarray.push (this.searchmemberarray [i]) ؛
}
}
إرجاع العودة ؛
} ،
// ----------------------------- [نتائج البحث الإخراج]
postmemberlist: function (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) ؛
} ،
// ----------------------------- [حدث بحث ملزم]
SearchActactiveEvent: function () {
var searchEngine = هذا ؛
$ (وثيقة) .on ("keyup" ، this.searchInput ، function () {
// تخزين المصفوفة التي تم العثور عليها مؤقتًا
var temparray = [] ؛
var val = $ (this) .val () ؛
// القواعد العادية للحكم على Pinyin
var pinyinrule = /^[a-za-z]+$ /؛
// قواعد الحكم على الشخصيات الصينية
var cncharacterrule = new regexp ("^[/u4e00-/u9fff]+$" ، "g") ؛
// انتظام الحكم على الأعداد الصحيحة
var digitalRule = /^ Budap-+/2010iship+(.d+)؟ you.d/ ؛
// ابحث فقط عن 3 حالات
// Pinyin
if (pinyinrule.test (val)) {
temparray = searchengine.fuzzysearch ("pinyin" ، val) ؛
}
// الشخصية الصينية
آخر إذا (cncharacterrule.test (val)) {
temparray = searchengine.fuzzysearch ("cncharacter" ، val) ؛
}
//رقم
وإلا إذا (digitalrule.test (val)) {
temparray = searchengine.fuzzysearch ("Digital" ، Val) ؛
}
آخر{
SearchEngine.SearchResultinner.html ('<li> لا توجد نتائج بحث ... </li>') ؛
}
SearchEngine.PostMemberList (Temparray) ؛
}) ؛
}
} ؛
هل التأثير جيد جدا؟ يمكن للأصدقاء استخدامه في مشاريعهم بعد تجميله