首頁 > web前端 > js教程 > 基於javascript實現的搜尋時自動提示功能_javascript技巧

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

WBOY
發布: 2016-05-16 16:24:14
原創
1025 人瀏覽過

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

效果圖:

功能描述:

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

實現思路:

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

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

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板