Javascript-based Automatic prompt during search _ javascript skills

This article mainly introduces the function of automatic prompt when searching based on javascript, which is very practical and recommended to the desired partners for reference. When the data volume is not large and there is no functional interface corresponding to the backend, some simple search functions are basically implemented by the front-end. This is just recently used and I wrote one, post it to share with you:

:

Function Description:

After pressing the keyboard, search for the Chinese characters in the entry and the Pinyin and number corresponding to the Chinese characters;

Implementation ideas:

First, convert the Chinese characters in the Entry into pinyin, then splice the Chinese characters, Pinyin, and numbers into regular strings, and put them into an array. Then, press the keyboard each time to judge whether the input value is Chinese character or pinyin, or a number, and then loop the array according to a fixed rule, so that the corresponding entries can be found;

Enabling method:

// Search-test-inner ---> outermost layer p
// Search-value ---> input box
// Search-value-list ---> search Result Display p
// Search-li ---> search entries
New SEARCH_ENGINE ("search-test-inner", "search-value", "search-value-list", "search-li ");
Note: two temporary data types are added to the search entries, data-name and data-phone, which are used to store Chinese characters and numbers.

Note: jQuery is used for PinYin conversion. hz2Py-min.js plug-in, because this plug-in can only convert the value in the input, so the Code has a step, first put the value into a temporary input, then convert.

HTML:

The Code is as follows:

• 
  13914157895
  Warrior
  


• 
  15112357896
  Priest
  


• 
  13732459980
  Thieves
  


• 
  18015942365
  Druid
  


• 
  15312485698
  Wu Seng
  


• 
  13815963258
  Mage beiling
  


• 
  13815934258
  Server guard
  

CSS:

The Code is 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:

The Code is as follows:

// ----------------------------------------------------- [Initialization]
Function SEARCH_ENGINE (dom, searchInput, searchResultInner, searchList ){
// An array for storing pinyin + Chinese characters + numbers
This. searchMemberArray = [];
// Target 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 save it to an array
This. transformPinYin ();
// Bind a search event
This. searchActiveEvent ();
}
SEARCH_ENGINE.prototype = {
// ----------------------------- [Convert to pinyin, and store pinyin, Chinese characters, and numbers into an 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 ");
// Number
Var digital = this. searchList. eq (I). attr ("data-phone ");
// Store the Array
This. searchMemberArray. push (pinyin + "&" + cnCharacter + "&" + digital );
}
// Delete the temporary 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 characters
If (this. searchMemberArray [I]. split ("&") [s]. indexOf (val)> = 0 ){
ReturnArray. push (this. searchMemberArray [I]);
}
}
Return returnArray;
},
// ------------------------------- [Output search result]
PostMemberList: function (tempArray ){
Var html = '';
// Search results available
If (tempArray. length> 0 ){
Html + ='

Search Result ('+ tempArray. length + ')

';
For (var I = 0; I Var sArray = tempArray [I]. split ("&");
Html + ='

';
Html + = ''+ sArray [2] + '';
Html + = ''+ sArray [1] + '';
Html + ='

';
}
}
// No search results
Else {
If ($ (this. searchInput). val ()! = ""){
Html + ='

No search results ......

';
} Else {
This.searchResultInner.html ("");
}
}
This.searchResultInner.html (html );
},
// ------------------------------- [Bind a search event]
SearchActiveEvent: function (){
Var searchEngine = this;
$ (Document). on ("keyup", this. searchInput, function (){
// Temporarily store the found Array
Var tempArray = [];
Var val = $ (this). val ();
// Judge the Regular Expression of Pinyin
Var pinYinRule =/^ [A-Za-z] + $ /;
// Judge the Regular Expression of Chinese Characters
Var cnCharacterRule = new RegExp ("^ [\ u4E00-\ u9FFF] + $", "g ");
// Judge the integer Regular Expression
Var digitalRule =/^ [-+]? D + (. d + )? $ /;
// Only search for three cases
// Pinyin
If (pinYinRule. test (val )){
TempArray = searchEngine. fuzzySearch ("pinyin", val );
}
// Chinese Characters
Else if (cnCharacterRule. test (val )){
TempArray = searchEngine. fuzzySearch ("cnCharacter", val );
}
// Number
Else if (digitalRule. test (val )){
TempArray = searchEngine. fuzzySearch ("digital", val );
}
Else {
SearchEngine.searchResultInner.html ('

No search results ......

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

Is the effect very good? You can use it in your own project if you guys beautify it.