Automatic prompt function when searching based on javascript_javascript skills

When the amount of data is not very large and there is no functional interface corresponding to the back-end, some simple search functions are basically implemented by the front-end. I happened to use it recently, so I wrote one and posted it to share with everyone:

Rendering:

Function description:

After pressing the keyboard, search for the Chinese characters in the entry, the corresponding pinyin and number of the Chinese characters;

Implementation ideas:

First convert the Chinese characters in the entry into Pinyin, then splice the Chinese characters, Pinyin, and numbers into a regular string, put it into an array, and then determine whether the value in the input is a Chinese character, Pinyin, or a number each time you press the keyboard. , and then loop through the array according to a fixed rule, so that the corresponding entry can be found;

Activation method:

// search-test-inner ---> Outermost div
// search-value ---> input input box
// search-value-list ---> Search results display div
// search-li ---> Search items
new SEARCH_ENGINE("search-test-inner","search-value","search-value-list","search-li");
Note: The search entry plus two temporary data, data-name and data-phone, are used to store Chinese characters and numbers.

Note: Pinyin conversion uses a plug-in called jQuery.Hz2Py-min.js. Since this plug-in can only convert the value in the input, there is an extra step in the code. First, put the value into a temporary input. , and then convert.

HTML:

Copy code The code is as follows:

   

       
       

   

   

       

           
• 
                  13914157895
                  战士
             

           
• 
                  15112357896
                  牧师
             

           
• 
                  13732459980
                  盗贼
             

           
• 
                  18015942365
                  德鲁伊
             

           
• 
                  15312485698
                  武僧
             

           
• 
                  13815963258
                  死灵法师
             

           
• 
                  13815934258
                  圣骑士
             

       

   

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:

复制代码 代码如下:

//------------------------------------------------ ---【Initialization】
function SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
//Array to store Pinyin, Chinese characters and numbers
This.searchMemberArray = [];
//Object of action
This.dom = $("." dom);
//Search box
This.searchInput = "." searchInput;
//Search results box
This.searchResultInner = this.dom.find("." searchResultInner);
//List of search objects
This.searchList = this.dom.find("." searchList);
//Convert to pinyin and store in array
This.transformPinYin();
//Bind search event
This.searchActiveEvent();
}
SEARCH_ENGINE.prototype = {
//-----------------------------【Convert to Pinyin and store Pinyin, Chinese characters, and numbers into the array】
TransformPinYin : function(){
//Temporarily store data objects
           $("body").append('');
        var $pinyin = $("input.pingying-box");
for(var i=0;i // Store the name and convert it to Pinyin
               $pinyin.val(this.searchList.eq(i).attr("data-name"));
//Convert Chinese characters to Pinyin
          var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
//Chinese characters
          var cnCharacter = this.searchList.eq(i).attr("data-name");
// Numbers <<>           var digital = this.searchList.eq(i).attr("data-phone");
​​​​​​ //Save into array
This.searchMemberArray.push(pinyin "&" cnCharacter "&" digital);
}
//Delete temporary storage data object
         $pinyin.remove();
},
//--------------------------------[Fuzzy search keyword]
fuzzySearch : function(type,val){
      var s;
        var returnArray = [];
​​​​ //Pinyin
If(type === "pinyin"){
          s = 0;
}
           //Chinese characters
          else if(type === "cnCharacter"){
          s = 1;
}
​​​​ //Number
           else if(type === "digital"){
          s = 2;
}
for(var i=0;i                                 // Contains the characters
If(this.searchMemberArray[i].split("&")[s].indexOf(val) >= 0){
                 returnArray.push(this.searchMemberArray[i]);
            }
}
         return returnArray;
},
//-----------------------------【Output search results】
PostMemberList : function(tempArray){
      var html = '';
//There are search results
        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 = '

';
            }
        }
        //无搜索结果
        else{
            if($(this.searchInput).val() != ""){
                html = '

无搜索结果……

';
            }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('

无搜索结果……

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

Isn’t the effect great? Friends, you can use it in your own projects after beautifying it