Front-end JavaScript-based search capabilities

When the amount of data is not very large, and there is no back-end corresponding function interface, some simple search function is basically the front-end to achieve, just recently used, wrote a, paste out and share with you:

Function Description:

After pressing the keyboard, search for the Chinese characters in the entry, the pinyin and numbers corresponding to the Chinese characters;

Implementation ideas:

First of all the Chinese characters in the entry into pinyin, and then the Chinese characters, pinyin, numerals into a regular string, put into the array, and then each time you press the keyboard to determine the value of input is Chinese characters, pinyin, or numbers, and then the fixed rules to loop the array, so you can find the corresponding entries;

How to enable:

Search-test-inner--->  outermost div//search-value---> Input  input box//search-value-list--->  Search results show div//search-li--->  search entry New Search_engine ("Search-test-inner", "Search-value", "Search-value-list", " Search-li ");

Note: Search entries plus two temporary data, data-name and Data-phone, are used to store Chinese characters and numbers.

Note: Pinyin conversion used to a plug-in called Jquery.hz2py-min.js, because this plugin can only convert the value in input, so the code is a step more, first put the value into a temporary input, and then convert.

Html:

<div class= "Search-test-inner" > <div class= "Search-val-inner" > <input type= "text" class= "search-v Alue "placeholder=" search "> <ul class=" search-value-list "></ul> </div> <div class=" member                -list-inner "> <ul> <li class=" Search-li "data-name=" Warrior "data-phone=" 13914157895 ">            <span class= "Phone" >13914157895</span> <span class= "name" > Warrior </span> </li> <li class= "Search-li" data-name= "priest" data-phone= "15112357896" > <span cl            ass= "Phone" >15112357896</span> <span class= "name" > Pastor </span> </li> <li class= "Search-li" Data-name= "rogue" data-phone= "13732459980" > <span class= "Phone" >1373 2459980</span> <span class= "name" > Rogue </span> </li> <li clas s= "Search-li" data-name="Druid" data-phone= "18015942365" > <span class= "Phone" >18015942365</span> <sp An class= "name" > Druid </span> </li> <li class= "Search-li" Data-name= "Wu Monk" data-phone= " 15312485698 "> <span class=" Phone ">15312485698</span> <span class=" name "                , Monk </span> </li> <li class= "Search-li" data-name= "Necromancer" data-phone= "13815963258" > <span class= "Phone" >13815963258</span> <span class= "name" > Necromancer </span&gt            ; </li> <li class= "Search-li" Data-name= "Paladin" data-phone= "13815934258" > <span class        = "Phone" >13815934258</span> <span class= "name" > Paladin </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:

---------------------------------------------------the Initialize function search_engine (dom,searchinput,    Searchresultinner,searchlist) {//store pinyin + Kanji + array of numbers this.searchmemberarray = [];    The Action object This.dom = $ ("." + DOM);    Search box This.searchinput = "." + searchinput;    Search Result Box This.searchresultinner = This.dom.find ("." + Searchresultinner);    List of search objects this.searchlist = This.dom.find ("." + searchlist);    Convert to pinyin and deposit into array this.transformpinyin (); Bind Search Event This.searchactiveevent ();}        Search_engine.prototype = {//-----------------------------"is converted to pinyin and the pinyin, kanji, and digits are stored in the array" transformpinyin:function () {        Temporarily holds the data object $ ("Body"). Append (' <input type= "text" class= "hidden Pingying-box" > ");        var $pinyin = $ ("Input.pingying-box"); for (Var i=0;i<this.searchlist.length;i++) {//Store name, convert to Pinyin $pinyin. Val (This.searchList.eq (i). attr ("D            Ata-name ")); Convert kanji to pinyin var pinyin = $pinyin. Topinyin (). toLowerCase (). Replace (/\s/g, "");            chinese var cncharacter = this.searchList.eq (i). attr ("Data-name");            numeric var digital = This.searchList.eq (i). attr ("Data-phone");        Deposit array this.searchMemberArray.push (Pinyin + "&" + Cncharacter + "&" + digital);    }//Delete temporary hold data Object $pinyin. Remove ();        },//-----------------------------"Fuzzy search keyword" fuzzysearch:function (type,val) {var s;        var returnarray = [];        Pinyin if (type = = = "Pinyin") {s = 0;        }//Kanji else if (type = = = "Cncharacter") {s = 1;        }//Number else if (type = = = "Digital") {s = 2; } for (Var i=0;i<this.searchmemberarray.length;i++) {//contains the character if (this.searchmemberarray[i].sp            Lit ("&") [S].indexof (val) >= 0) {Returnarray.push (this.searchmemberarray[i]);    }} return ReturnArray; },//-----------------------------"Output searchCable result "Postmemberlist:function (temparray) {var html = '; Search results if (Temparray.length > 0) {html + = ' <li class= ' tips ' > Search results (' + 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> '; }}//No search results else{if ($ (this.searchinput). val ()! = "") {html + = ' <li clas            s= "Tips" > No search results ......</li> ';            }else{this.searchResultInner.html ("");    }} this.searchResultInner.html (HTML);        },//-----------------------------"bind Search Event" searchactiveevent:function () {var searchengine = this; $ (document). On ("KeyUp", this. Searchinput,function () {//temporary storage of the found array var temparray = [];            var val = $ (this). Val ();            Judging Pinyin regular var pinyinrule =/^[a-za-z]+$/;            Determine the regular var of Chinese characters cncharacterrule = new RegExp ("^[\\u4e00-\\u9fff]+$", "G");            Determine the regular var of integers digitalrule =/^[-\+]?\d+ (\.\d+)? $/; Search only 3 cases//Pinyin if (Pinyinrule.test (val)) {Temparray = Searchengine.fuzzysearch ("Pinyin            ", Val); }//Kanji else if (Cncharacterrule.test (val)) {Temparray = Searchengine.fuzzysearch ("Cnch            Aracter ", Val); }//Number else if (Digitalrule.test (val)) {Temparray = Searchengine.fuzzysearch ("digital"            , Val);            } else{searchEngine.searchResultInner.html (' <li class= ' tips ' > No search Results ......</li> ');        } searchengine.postmemberlist (Temparray);    }); }};

Bash demo?

Front-end JavaScript-based search capabilities