javascript_javascriptスキルに基づいて検索するときの自動プロンプト機能

データ量がそれほど多くなく、バックエンドに相当する機能インターフェースがない場合、いくつかの簡単な検索機能は基本的にフロントエンドによって実装されます。最近たまたま使用したので、それを作成しました。みんなと共有するために投稿しました:

レンダリング:

機能の説明:

キーボードを押した後、エントリ内の中国語の文字、対応するピンインと中国語の文字の番号を検索します。

実装のアイデア:

まずエントリ内の中国語の文字をピンインに変換し、次に中国語の文字、ピンイン、および数字を通常の文字列に結合し、それを配列に入れて、入力の値が中国語の文字、ピンインであるかどうかを判断します。 、またはキーボードを押すたびに数値を入力し、一定のルールに従って配列をループして、対応するエントリを見つけます。

アクティベーション方法:

// search-test-inner ---> 最も外側の div

// 検索値 ---> 入力入力ボックス
// 検索値リスト ---> 検索結果表示 div
// search-li ---> 項目を検索
new SEARCH_ENGINE("検索テスト内部","検索値","検索値リスト","検索リ");
注: 検索エントリと 2 つの一時データ (データ名とデータ電話) は、漢字と数字を保存するために使用されます。

注: ピンイン変換は jQuery.Hz2Py-min.js というプラグインを使用します。このプラグインは入力の値のみを変換できるため、コードに最初に値を入力する必要があります。一時的に入力してから変換します。

HTML:

コードをコピー コードは次のとおりです:

   

       
       

   

   

       

           
• 
                  13914157895
                  战士
             

           
• 
                  15112357896
                  牧师
             

           
• 
                  13732459980
                  盗贼
             

           
• 
                  18015942365
                  德鲁伊
             

           
• 
                  15312485698
                  武僧
             

           
• 
                  13815963258
                  死灵法师
             

           
• 
                  13815934258
                  圣骑士
             

       

   

CSS:

复制代码代码如下:

* { パディング: 0;マージン: 0; }
ol 、 ul { リストスタイル: なし; }
ボディ { フォントサイズ: 12px;色:#333; }
.search-test-inner { マージン: 100px 自動;パディング: 10px;幅: 400ピクセル;背景: #e0e0e0;境界半径: 10px;ボックスシャドウ: 1px 2px 6px #444; }
.search-val-inner { margin-bottom: 20px;パディング: 10px;背景: #fff; }
.member-list-inner .search-li { パディング: 10px; }
.search-value-list { margin-top: 10px; }
.search-value-list li { パディング: 5px; }
.member-list-inner .search-li .phone,
.search-value-list li .phone { float: right; }
.search-value { 幅: 100%;高さ: 30ピクセル;行の高さ: 30px; }
.tips { font-weight: 太字; }

JS:

复制代码代码如下:

//------------------------------------------------ ---【初期化】
関数 SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
//ピンイン、中国語の文字、数字を格納する配列
This.searchMemberArray = [];
//アクションのオブジェクト
This.dom = $("." dom);
//検索ボックス
This.searchInput = "." 検索入力;
//検索結果ボックス
This.searchResultInner = this.dom.find("." searchResultInner);
//検索オブジェクトのリスト
This.searchList = this.dom.find("." searchList);
//ピンインに変換して配列に格納
This.transformPinying();
//バインド検索イベント
This.searchActiveEvent();
}
SEARCH_ENGINE.prototype = {
//----------------------------【ピンインに変換し、ピンイン、漢字、数字を配列に格納】
TransformPinying : function(){
//データオブジェクトを一時的に保存します
$("body").append('');
var $pinyin = $("input.pingying-box");
for(var i=0;i // 名前を保存し、ピンインに変換します
$pinyin.val(this.searchList.eq(i).attr("データ名"));
//中国語の文字をピンインに変換します
var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
//漢字
var cnCharacter = this.searchList.eq(i).attr("データ名");
に vardigital = this.searchList.eq(i).attr("data-phone");
//配列に保存
This.searchMemberArray.push(ピンイン "&" cnCharacter "&"digital);
}
//一時ストレージ データ オブジェクトを削除します
$pinyin.remove();
}、
//--------------------------------[あいまい検索キーワード]
ファジーサーチ : function(type,val){
var s;
var returnArray = [];
//ピンイン
If(type === "ピンイン"){
s = 0;
}
//漢字
else if(type === "cnCharacter"){
s = 1;
}
//数値
else if(type === "デジタル"){
s = 2;
}
for(var i=0;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 = '

搜索结果（' tempArray.length '）

';
            for(var i=0;i                 var sArray = tempArray[i].split("&");
                html = '

';
                html = '' sArray[2] '';
                html = '<スパンクラス="名前">' sArray[1] '';
                html = '

';
            }
        }
        //無搜索結果
        それ以外{
            if($(this.searchInput).val() != ""){
                html = '

無搜索结果……

';
            }その他{
                this.searchResultInner.html("");
            }
        }
        this.searchResultInner.html(html);
    }、
    //----------------------------【绑定搜索イベント】
    searchActiveEvent : function(){
        var searchEngine = this;
        $(document).on("keyup",this.searchInput,function(){
            //一時的に保存された数グループ
            var tempArray = [];
            var val = $(this).val();
            // 判断拼音の正则
            var pinyingRule = /^[A-Za-z] $/;
            // 判断汉字の正则
            var cnCharacterRule = new RegExp("^[u4E00-u9FFF] $","g");
            // 判断整数の正则
            vardigitalRule = /^[- ]?d (.d )?$/;
            //只搜索3种情况
            //拼音
            if(pinyingRule.test(val)){
                tempArray = searchEngine.fuzzySearch("ピンイン",val);
            }
            //汉字
            else if(cnCharacterRule.test(val)){
                tempArray = searchEngine.fuzzySearch("cnCharacter",val);
            }
            // 数字
            else if(digitalRule.test(val)){
                tempArray = searchEngine.fuzzySearch("digital",val);
            }
            それ以外{
                searchEngine.searchResultInner.html('

無搜索结果……

');
}
searchEngine.postMemberList(tempArray);
});
}
};

効果は素晴らしいと思いませんか? 美化した後、自分のプロジェクトに使用できます