_javascript technique of automatic prompt function in search based on JavaScript implementation

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.