Когда объем данных не большой, и нет соответствующего функционального интерфейса для бэкэнда, некоторые простые функции поиска в основном реализованы фронтом. Я случайно использовал его недавно. Я написал один и опубликовал его, чтобы поделиться с вами:
Изображение воспроизведения:
Описание функции:
После нажатия на клавиатуре найдите китайских иероглифы во времени, а также пинин и номер, соответствующие китайским иероглистам;
Идеи реализации:
Сначала преобразуйте китайские иероглифы в вход в пининин, затем разбейте китайских иероглифы, пининина и числа в обычные строки и поместите их в массив. Затем, после нажатия клавиатуры, определите, является ли значение в входе китайским символом, пинином или номером, а затем зацикьте массив в соответствии с фиксированным правилом, чтобы можно было найти соответствующую запись;
Включено:
// search-test-inner ---> самый внешний див
// поисковая value ---> входное поле ввода
// list-list ---> результаты поиска показывают div
// search-li ---> запись поиска
new Search_Engine («Search-Test-Inner», «Search-Value», «Поиск-Value-List», «Search-Li»);
ПРИМЕЧАНИЕ. Поиск-плюс два временных данных, имени данных и данных, для хранения китайских символов и номеров.
ПРИМЕЧАНИЕ. Для преобразования пининина используется плагин с именем jquery.hz2py-min.js. Поскольку этот плагин может только преобразовать значения на входе, в коде есть дополнительный шаг, сначала поместите значение во временный ввод, а затем преобразуйте его.
HTML:
Кода -копия выглядит следующим образом:
<div>
<div>
<input type = "text" Placeholder = "search">
<ul> </ul>
</div>
<div>
<ul>
<li Data-name = "Warrior" Data-Phone = "13914157895">
<pran> 13914157895 </span>
<pran> Воин </span>
</li>
<li data-name = "pastor" data-phone = "15112357896">
<pran> 15112357896 </span>
<pran> пастор </span>
</li>
<li Data-name = "Воры" Data-Phone = "13732459980">
<pran> 13732459980 </span>
<pran> воры </span>
</li>
<li Data-name = "Druid" Data-Phone = "18015942365">
<pran> 18015942365 </span>
<pan> Друид </span>
</li>
<li data-name = "monk" data-phone = "15312485698">
<pran> 15312485698 </span>
<pran> Обезьяна </span>
</li>
<li Data-name = "Нейтенант" Data-Phone = "13815963258">
<pran> 13815963258 </span>
<pran> Нейтенантный мастер </span>
</li>
<li Data-name = "paladin" Data-Phone = "13815934258">
<pran> 13815934258 </span>
<pan> Паладин </span>
</li>
</ul>
</div>
</div>
CSS:
Кода -копия выглядит следующим образом:
* {Padding: 0; поля: 0; }
ol, ul {list-style: нет; }
тело {font-size: 12px; Цвет:#333; }
.search-test-inner {margin: 100px Auto; Заполнение: 10px; Ширина: 400px; Фон: #E0E0E0; граница радий: 10px; Box-Shadow: 1px 2px 6px #444; }
.search-val-inner {margin-bottom: 20px; Заполнение: 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: right; }
.search-value {ширина: 100%; Высота: 30px; высота линии: 30px; }
.tips {font-weight: Bold; }
JS:
Кода -копия выглядит следующим образом:
// --------------------------------------------------- 【Инициализация】
Функция 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.SearchActiveVent ();
}
Search_engine.prototype = {
// -------------------------------------------- [преобразовать в пининин и сохранить пийнин, китайские иероглифы и числа в массив]
Transformpinyin: function () {
// временно хранить объекты данных
$ ("body"). Append ('<input type = "text">');
var $ pinyin = $ ("input.inging-box");
for (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 + "&" + digital);
}
// Удалить объект данных временного хранения
$ pinyin.remove ();
},
// --------------------------------- [Нечеткие ключевые слова поиска]
FuzzySearch: function (type, val) {
var s;
var returnArray = [];
// pinyin
if (type === "pinyin") {
s = 0;
}
// китайский персонаж
иначе if (type === "cncharacter") {
s = 1;
}
//число
else if (type === "Digital") {
s = 2;
}
for (var i = 0; i <this.searchmemberarray.length; i ++) {
// Включите символы
if (this.searchmemberarray [i] .split ("&") [s] .indexof (val)> = 0) {
returnArray.push (this.searchmemberarray [i]);
}
}
return returnArray;
},
// ------------------------------- [Результаты поиска поиска]
PostmemberList: function (Temparray) {
var html = '';
// есть результаты поиска
if (temparray.length> 0) {
html + = '<li> Результаты поиска (' + temparray.length + ') </li>';
for (var i = 0; i <temparray.length; i ++) {
var sarray = temparray [i] .split ("&");
html += '<li>';
html + = '<pan>' + sarray [2] + '</span>';
html + = '<pan>' + sarray [1] + '</span>';
html += '</li>';
}
}
// нет результатов поиска
еще{
if ($ (this.searchinput) .val ()! = "") {
html += '<li> Нет результатов поиска ... </li>';
}еще{
this.searchresultinner.html ("" ");
}
}
this.searchresultinner.html (html);
},
// ----------------------------- [Событие по поиску привязки]
SearchActiveVent: function () {
var searchengine = this;
$ (document) .on ("keyup", this.searchinput, function () {
// временно хранить найденный массив
var temparray = [];
var val = $ (this) .val ();
// регулярные правила оценки пининина
var pinyinrule = /^[a-za-z]+$ /;
// Правила оценки китайских иерог
var cncharacterrule = new Regexp ("^[/u4e00-/u9fff]+$", "g");
// регулярность судейства целых чисел
var DigitalRule = /^^-+^?d+(.d+)?$/;
// поиск только для 3 ситуаций
// pinyin
if (pinyinrule.test (val)) {
temparray = searchengine.fuzzysearch ("pinyin", val);
}
// китайский персонаж
else if (cncharacterrule.test (val)) {
temparray = searchengine.fuzzysearch ("cncharacter", val);
}
//число
else if (digitalrule.test (val)) {
temparray = searchengine.fuzzysearch ("digital", val);
}
еще{
searchengine.searchresultinner.html ('<li> Нет результатов поиска ... </li>');
}
searchengine.postmemberlist (Temparray);
});
}
};
Эффект очень хороший? Друзья могут использовать его в своих проектах после украшения