基于javascript實現的搜索時自動提示功能

2019-11-20 13:35:45

字體：大中小

來源：轉載

供稿：網友

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

效果圖：

功能描述：

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

實現思路：

先將條目中的漢字轉換成拼音，然后將漢字，拼音，數字拼接成規律的字符串，放入數組，然后每次按下鍵盤后判斷 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：

復制代碼代碼如下:

<div class="search-test-inner">
    <div class="search-val-inner">
        <input type="text" class="search-value" placeholder="搜索">
        <ul class="search-value-list"></ul>
    </div>
    <div class="member-list-inner">
        <ul>
            <li class="search-li" data-name="戰士" data-phone="13914157895">
                <span class="phone">13914157895</span>
                <span class="name">戰士</span>
            </li>
            <li class="search-li" data-name="牧師" data-phone="15112357896">
                <span class="phone">15112357896</span>
                <span class="name">牧師</span>
            </li>
            <li class="search-li" data-name="盜賊" data-phone="13732459980">
                <span class="phone">13732459980</span>
                <span class="name">盜賊</span>
            </li>
            <li class="search-li" data-name="德魯伊" data-phone="18015942365">
                <span class="phone">18015942365</span>
                <span class="name">德魯伊</span>
            </li>
            <li class="search-li" data-name="武僧" data-phone="15312485698">
                <span class="phone">15312485698</span>
                <span class="name">武僧</span>
            </li>
            <li class="search-li" data-name="死靈法師" data-phone="13815963258">
                <span class="phone">13815963258</span>
                <span class="name">死靈法師</span>
            </li>
            <li class="search-li" data-name="圣騎士" data-phone="13815934258">
                <span class="phone">13815934258</span>
                <span class="name">圣騎士</span>
            </li>
        </ul>
    </div>
</div>

CSS:

復制代碼代碼如下:

* { padding: 0; margin: 0; }
ol , ul { list-style: none; }
body { font-size: 12px; color:#333; }
.search-test-inner { margin: 100px auto; padding: 10px; width: 400px; background: #e0e0e0; border-radius: 10px; box-shadow: 1px 2px 6px #444; }
.search-val-inner { margin-bottom: 20px; padding: 10px; background: #fff; }
.member-list-inner .search-li { padding: 10px; }
.search-value-list { margin-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%; height: 30px; line-height: 30px; }
.tips { font-weight: bold; }

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('<input type="text" class="hidden pingying-box">');
        var $pinyin = $("input.pingying-box");
        for(var i=0;i<this.searchList.length;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<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 class="tips">搜索結果（' + tempArray.length + '）</li>';
            for(var i=0;i<tempArray.length;i++){
                var sArray = tempArray[i].split("&");
                html += '<li>';
                html += '<span class="phone">' + sArray[2] + '</span>';
                html += '<span class="name">' + sArray[1] + '</span>';
                html += '</li>';
            }
        }
        //無搜索結果
        else{
            if($(this.searchInput).val() != ""){
                html += '<li class="tips">無搜索結果……</li>';
            }else{
                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("pinyin",val);
            }
            //漢字
            else if(cnCharacterRule.test(val)){
                tempArray = searchEngine.fuzzySearch("cnCharacter",val);
            }
            //數字
            else if(digitalRule.test(val)){
                tempArray = searchEngine.fuzzySearch("digital",val);
            }
            else{
                searchEngine.searchResultInner.html('<li class="tips">無搜索結果……</li>');
            }
            searchEngine.postMemberList(tempArray);
        });
    }
};