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

* { パディング: 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: 太字; }

//------------------------------------------------ ---【初期化】
関数 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);
});
}
};