When the data volume is not large and there is no corresponding functional interface for the backend, some simple search functions are basically implemented by the frontend. I happened to use it recently. I wrote one and posted it to share with you:
Reproduction image:
Function description:
After pressing the keyboard, search for the Chinese characters in the entry in time, 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, after pressing the keyboard, determine whether the value in input is a Chinese character, pinyin, or number, and then loop the array according to a fixed rule, so that the corresponding entry can be found;
Enabled:
// 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 is plus two temporary data, data-name and data-phone, to store Chinese characters and numbers.
Note: A plug-in called jQuery.Hz2Py-min.js is used to convert pinyin. Since this plug-in can only convert the values in the input, there is an extra step in the code, first put the value into a temporary input, and then convert it.
HTML:
The code copy is as follows:
<div>
<div>
<input type="text" placeholder="Search">
<ul></ul>
</div>
<div>
<ul>
<li data-name="warrior" data-phone="13914157895">
<span>13914157895</span>
<span>Warrior</span>
</li>
<li data-name="Pastor" data-phone="15112357896">
<span>15112357896</span>
<span>Pastor</span>
</li>
<li data-name="Thieves" data-phone="13732459980">
<span>13732459980</span>
<span>Thieves</span>
</li>
<li data-name="druid" data-phone="18015942365">
<span>18015942365</span>
<span>Druid</span>
</li>
<li data-name="Monk" data-phone="15312485698">
<span>15312485698</span>
<span>Monkey</span>
</li>
<li data-name="Neutenant" data-phone="13815963258">
<span>13815963258</span>
<span>Neutenant wizard</span>
</li>
<li data-name="Paladin" data-phone="13815934258">
<span>13815934258</span>
<span>Paladin</span>
</li>
</ul>
</div>
</div>
CSS:
The code copy 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 copy is as follows:
//---------------------------------------------------【initialization】
function SEARCH_ENGINE(dom,searchInput,searchResultInner,searchList){
//Arrays of pinyin + Chinese characters + numbers
this.searchMemberArray = [];
//Asses
this.dom = $("." + dom);
//Search box
this.searchInput = "." + searchInput;
//Search result box
this.searchResultInner = this.dom.find("." + searchResultInner);
//Search list of objects
this.searchList = this.dom.find("." + searchList);
//Convert to pinyin and save it into an array
this.transformPinYin();
//Binding search event
this.searchActiveEvent();
}
SEARCH_ENGINE.prototype = {
//--------------------------------------------[Convert to pinyin and save pinyin, Chinese characters, and numbers into an array]
transformPinYin : function(){
//Temporarily store data objects
$("body").append('<input type="text">');
var $pinyin = $("input.pingying-box");
for(var i=0;i<this.searchList.length;i++){
//Storage the name and convert it into pinyin
$pinyin.val(this.searchList.eq(i).attr("data-name"));
//Convert Chinese characters to pinyin
var pinyin = $pinyin.toPinyin().toLowerCase().replace(/s/g,"");
//Chinese character
var cnCharacter = this.searchList.eq(i).attr("data-name");
//number
var digital = this.searchList.eq(i).attr("data-phone");
//Save in array
this.searchMemberArray.push(pinyin + "&" + cnCharacter + "&" + digital);
}
//Delete temporary storage data object
$pinyin.remove();
},
//---------------------------------[Fuzzy search keywords]
fuzzySearch : function(type,val){
var s;
var returnArray = [];
//Pinyin
if(type === "pinyin"){
s = 0;
}
//Chinese character
else if(type === "cnCharacter"){
s = 1;
}
//number
else if(type === "digital"){
s = 2;
}
for(var i=0;i<this.searchMemberArray.length;i++){
//Include 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 += '<li>Search results (' + tempArray.length + ') </li>';
for(var i=0;i<tempArray.length;i++){
var sArray = tempArray[i].split("&");
html += '<li>';
html += '<span>' + sArray[2] + '</span>';
html += '<span>' + sArray[1] + '</span>';
html += '</li>';
}
}
//No search results
else{
if($(this.searchInput).val() != ""){
html += '<li>No search results...</li>';
}else{
this.searchResultInner.html("");
}
}
this.searchResultInner.html(html);
},
//-----------------------------[Binding 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 rules for judging pinyin
var pinYinRule = /^[A-Za-z]+$/;
//The rules for judging Chinese characters
var cnCharacterRule = new RegExp("^[/u4E00-/u9FFF]+$","g");
//The regularity of judging integers
var digitalRule = /^[-+]?d+(.d+)?$/;
//Search only for 3 situations
//Pinyin
if(pinYinRule.test(val)){
tempArray = searchEngine.fuzzySearch("pinyin",val);
}
//Chinese character
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('<li>No search results...</li>');
}
searchEngine.postMemberList(tempArray);
});
}
};
Is the effect very good? Friends can use it in their projects after beautifying it