基於javascript實現的搜尋時自動提示功能_javascript技巧

當在資料量不是很大，而且沒有後端對應的功能介面的時候，一些簡單的搜尋功能基本上是前端去實現的，正好最近用到，寫了一個，貼出來和大家分享：

效果圖：

功能描述：

按下鍵盤後及時搜尋條目中的漢字，漢字對應的拼音和號碼；

實現思路：

先將條目中的漢字轉換成拼音，然後將漢字，拼音，數字拼接成規律的字串，放入數組，然後每次按下鍵盤後判斷input 中的值是漢字，拼音，還是數字，然後按固定的規律去循環數組，這樣就能找到對應的條目了；

啟用方式：

// search-test-inner --->  最外層div
// search-value --->  input 輸入框
// search-value-list --->  搜尋結果顯示div
// search-li --->  搜尋條目
new SEARCH_ENGINE("search-test-inner","search-value","search-value-list","search-li");
注意：搜尋條目加上兩個臨時數據，data-name 和 data-phone ，用來儲存漢字和數字。

說明：拼音的轉換用到了一個叫jQuery.Hz2Py-min.js 的插件，由於這個插件只能轉換input 裡的值，所以程式碼裡多了一個步驟，先將值放入一個暫時的input ，再轉換。

HTML：

複製程式碼 程式碼如下:

   

       
       

   

   

       

           
• 
                  13914157895
                  戰士
             

           
• 
                  15112357896
                  好友
             

           
• 
                  13732459980
                  盜賊
             

           
• 
                  18015942365
                  德魯伊
             

           
• 
                  15312485698
                  武僧
             

           
• 
                  13815963258
                  死靈法師
             

           
• 
                  13815934258
                  聖騎士
             

       

   

CSS：

複製程式碼如下程式碼：

* { 填充：0；保證金：0； }
ol , ul { 列表樣式：無； }
正文 { 字體大小：12px;顏色：#333； }
.search-test-inner { 邊距：100px 自動；內邊距：10px；寬度：400px；背景：#e0e0e0；邊框半徑：10px；框陰影：1px 2px 6px #444； }
；框陰影：1px 2px 6px #444； }
；框陰影：1px 2px 6px #444； }
.search-val-inner { 邊距底部：20px;內邊距：10px；背景：#fff； }
.member-list-inner .search-li { 填入：10px; }
.search-value-list { 邊距頂部：10px; }
.search-value-list li { 填充：5px; }
.member-list-inner .search-li .phone,
.search-value-list li .phone { float: right; }
.search-value { 寬度：100%；高度：30px；行高：30px； }

.tips { 字型粗細：粗體； }

JS：

複製程式碼

程式碼如下：

//------------------------------------------------ ---【初始化】
function 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.searchActiveEvent();
}
SEARCH_ENGINE.prototype = {
    //-----------------------------【轉換成拼音，拼音、漢字、數字存入陣列】
    transformPinYin : function(){
        //暫時存放資料物件
        $("body").append('');
        var $pinyin = $("input.pingying-box");
        for(var i=0;i             //存放名字，並轉換成拼音
            $pinyin.val(this.searchList.eq(i).attr("data-name"));
            //漢字轉換成拼音
            var pinyin = $pinyin.toPinyin().toLowerCase().replace(/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             //包含字元
            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 pinYinRule = /^[A-Za-z] $/;
            //判斷漢字的正則
            var cnCharacterRule = new RegExp("^[u4E00-u9FFF] $","g");
            //判斷整數的正規
            var digitalRule = /^[- ]?d (.d )?$/;
            //只搜尋3種狀況
            //拼音
            if(pinYinRule.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);
        });
    }
};

效果是不是非常棒呢，小夥伴們美化下就可以用到自己專案中了