When the volume of data is not very large, and there is no backend corresponding functional interface, some simple search function is basically the front-end to achieve, just recently used, wrote a, posted out and share:
Effect Chart:
Function Description:
After pressing the keyboard in time to search the entry of Chinese characters, the corresponding pinyin and number of Chinese characters;
Realize the idea:
First converts the Chinese characters in the entry into pinyin, then the Chinese characters, pinyin, the number of stitching into a regular string, put in an array, and then each time the keyboard to determine the value of input is Chinese characters, pinyin, or numbers, and then according to a fixed rule to cycle the array, so you can find the corresponding entry;
Enable mode:
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: The search entry adds two temporary data, Data-name and Data-phone, for storing Chinese characters and numbers.
Note: Pinyin conversion to use a call Jquery.hz2py-min.js Plug-ins, because this plug-in can only be converted into the value of input, so the code has a more than one step, first put the value into a temporary input, and then converted.
Html:
Copy Code code as follows:
<div class= "Search-test-inner" >
<div class= "Search-val-inner" >
<input type= "text" class= "Search-value" 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= "Pastor" data-phone= "15112357896" >
<span class= "Phone" >15112357896</span>
<span class= "Name" > Pastor </span>
</li>
<li class= "Search-li" Data-name= "rogue" data-phone= "13732459980" >
<span class= "Phone" >13732459980</span>
<span class= "Name" > Rogue </span>
</li>
<li class= "Search-li" Data-name= "Druid" data-phone= "18015942365" >
<span class= "Phone" >18015942365</span>
<span class= "name" > Druid </span>
</li>
<li class= "Search-li" data-name= "Martial Monk" data-phone= "15312485698" >
<span class= "Phone" >15312485698</span>
<span class= "Name" > Wu monk </span>
</li>
<li class= "Search-li" data-name= "Necromancer" data-phone= "13815963258" >
<span class= "Phone" >13815963258</span>
<span class= "Name" > Necromancer </span>
</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:
Copy Code code as follows:
* {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:
Copy Code code as follows:
---------------------------------------------------"Initialize"
function Search_engine (dom,searchinput,searchresultinner,searchlist) {
Store an array of pinyin + kanji + digits
This.searchmemberarray = [];
Action Object
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 save into an array
This.transformpinyin ();
Binding Search Events
This.searchactiveevent ();
}
Search_engine.prototype = {
-----------------------------"Convert to pinyin, and put pinyin, Chinese characters, numbers into an array"
Transformpinyin:function () {
Temporarily store data Objects
$ ("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 ("Data-name"));
Converting Chinese characters into pinyin
var pinyin = $pinyin. Topinyin (). toLowerCase (). Replace (/s/g, "");
Chinese characters
var cncharacter = This.searchList.eq (i). attr ("Data-name");
Digital
var digital = This.searchList.eq (i). attr ("Data-phone");
Save in Array
This.searchMemberArray.push (Pinyin + "&" + Cncharacter + "&" + digital);
}
Delete temporary storage data Objects
$pinyin. Remove ();
},
-----------------------------"Blur search keyword"
Fuzzysearch:function (type,val) {
var s;
var returnarray = [];
Pinyin
if (type = = = "Pinyin") {
s = 0;
}
Chinese characters
else if (type = = "Cncharacter") {
s = 1;
}
Digital
else if (type = = "digital") {
s = 2;
}
for (Var i=0;i<this.searchmemberarray.length;i++) {
Contains 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 = ';
We have 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 class= ' 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 () {
Temporarily store the found array
var temparray = [];
var val = $ (this). Val ();
The regular of judging pinyin
var pinyinrule =/^[a-za-z]+$/;
The regular of judging Chinese characters
var cncharacterrule = new RegExp ("^[\u4e00-\u9fff]+$", "G");
To judge the regular of an integer
var digitalrule =/^[-+]?d+ (. d+)? $/;
Search only 3 cases
Pinyin
if (Pinyinrule.test (val)) {
Temparray = searchengine.fuzzysearch ("Pinyin", Val);
}
Chinese characters
else if (Cncharacterrule.test (val)) {
Temparray = Searchengine.fuzzysearch ("Cncharacter", Val);
}
Digital
else if (Digitalrule.test (val)) {
Temparray = Searchengine.fuzzysearch ("digital", Val);
}
else{
SearchEngine.searchResultInner.html (' <li class= ' tips ' > No search Results ......</li> ');
}
Searchengine.postmemberlist (Temparray);
});
}
};
The effect is not very good, small partners can be used to beautify the project in their own