データボリュームが大きくなく、バックエンドに対応する機能インターフェイスがない場合、一部の単純な検索関数は基本的にフロントエンドによって実装されます。私は最近それを使っていました。私はそれを書いて、あなたと共有するためにそれを投稿しました：
複製画像：
関数の説明：
キーボードを押した後、エントリ内の漢字を時間内に検索し、漢字に対応するピンインと数を検索します。
実装のアイデア：
最初にピニインに入って漢字を変換し、次に漢字、ピニイン、数字を通常の文字列にスプライスし、それらを配列に入れます。次に、キーボードを押した後、入力の値が漢字、ピンイン、または数字であるかどうかを判断し、固定ルールに従って配列をループして、対応するエントリを見つけることができます。
有効：
// 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"）;
注：検索エントリは、漢字と数字を保存するための2つの一時データ、データ名とデータフォンです。
注：jquery.hz2py-min.jsというプラグインは、Pinyinを変換するために使用されます。このプラグインは入力の値を変換できるため、コードに追加のステップがあり、最初に値を一時入力に入れてから変換します。
HTML：
コードコピーは次のとおりです。
<div>
<div>
<input type = "text" placeholder = "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 = "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>モンキー</span>
</li>
<li data-name = "Neutenant" data-phone = "13815963258">
<Span> 13815963258 </span>
<span>中性魔術師</span>
</li>
<li data-name = "paladin" data-phone = "13815934258">
<Span> 13815934258 </span>
<span> paladin </span>
</li>
</ul>
</div>
</div>
CSS：
コードコピーは次のとおりです。
* {パディング：0;マージン：0; }
ol、ul {list-style：none; }
ボディ{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 {mign-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％;高さ：30px; Line-Height：30px; }
.tips {font-weight：bold; }
JS：
コードコピーは次のとおりです。
// --------------------------------------------------------初期化】
function search_engine（dom、searchinput、searchResultinner、searchList）{
// Pinyin +漢字 +数字の配列
this.searchmemberraray = [];
// asses
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"）。append（ '<input type = "text">'）;
var $ pinyin = $（ "input.pinging-box"）;
for（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 = [];
//ピンイン
if（type === "pinyin"）{
s = 0;
}
//漢字
else if（type === "cncharacter"）{
S = 1;
}
//番号
else if（type === "digital"）{
S = 2;
}
for（var i = 0; i <this.searchmemberraray.length; i ++）{
//文字を含めます
if（this.searchmemberrarray [i] .split（ "＆"）[s] .indexof（val）> = 0）{
returnArray.push（this.searchmemberraray [i]）;
}
}
Return ReturnArray;
}、
// ------------------------------ [出力検索結果]
membermerlist：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 + = '<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;
$（document）.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 = /^
// 3つの状況のみを検索します
//ピンイン
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）;
}）;
}
};
効果はとても良いですか？友達はそれを美化した後、プロジェクトでそれを使用できます