Lorsque le volume de données n'est pas important et qu'il n'y a pas d'interface fonctionnelle correspondante pour le backend, certaines fonctions de recherche simples sont essentiellement implémentées par le frontend. Je l'ai utilisé récemment. J'en ai écrit un et je l'ai publié pour partager avec vous:
Image de reproduction:
Description de la fonction:
Après avoir appuyé sur le clavier, recherchez les caractères chinois dans l'entrée dans le temps, et le pinyin et le nombre correspondant aux caractères chinois;
Idées de mise en œuvre:
Convertissez d'abord les caractères chinois dans l'entrée en pinyin, puis épissez les caractères chinois, le pinyin et les numéros en cordes régulières et les mettez dans un tableau. Ensuite, après avoir appuyé sur le clavier, déterminez si la valeur d'entrée est un caractère chinois, un pinyin ou un nombre, puis faire boucle le tableau en fonction d'une règle fixe, afin que l'entrée correspondante puisse être trouvée;
Activé:
// Recherche-test-inner ---> Div le plus externe
// Recherche-Value ---> Boîte d'entrée d'entrée
// Search-Value-List ---> Les résultats de recherche montrent Div
// Search-li ---> Entrée de recherche
new Search_Engine ("Search-Test-Inner", "Search-Value", "Search-Value-List", "Search-Li");
Remarque: l'entrée de recherche est plus deux données temporaires, nom de données et téléphone de données, pour stocker les caractères et les chiffres chinois.
Remarque: Un plug-in appelé jQuery.hz2py-Min.js est utilisé pour convertir Pinyin. Étant donné que ce plug-in ne peut convertir les valeurs de l'entrée, il y a une étape supplémentaire dans le code, mettez d'abord la valeur dans une entrée temporaire, puis convertissez-la.
HTML:
La copie de code est la suivante:
<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 = "pasteur" data-phone = "15112357896">
<span> 15112357896 </span>
<span> pasteur </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> singe </span>
</li>
<li data-name = "Neutenant" data-phone = "13815963258">
<span> 13815963258 </span>
<Span> Assistant neutre </span>
</li>
<li data-name = "paladin" data-phone = "13815934258">
<span> 13815934258 </span>
<span> paladin </span>
</li>
</ul>
</div>
</div>
CSS:
La copie de code est la suivante:
* {rembourrage: 0; marge: 0; }
ol, ul {list-style: aucun; }
corps {taille de police: 12px; Couleur: # 333; }
.Search-Test-inner {margin: 100px auto; rembourrage: 10px; Largeur: 400px; Contexte: # E0E0E0; Border-Radius: 10px; Box-shadow: 1px 2px 6px # 444; }
.Search-Val-inner {margin-boot: 20px; rembourrage: 10px; Contexte: #FFF; }
.Member-list-inner .search-li {padding: 10px; }
.Search-Value-list {margin-top: 10px; }
.Search-valeur-list li {padding: 5px; }
.Member-list-inner .search-li .phone,
.Search-Value-list li .phone {float: droite; }
.Search-Value {Largeur: 100%; hauteur: 30px; hauteur de ligne: 30px; }
.Tips {Font-Weight: Bold; }
JS:
La copie de code est la suivante:
// --------------------------------------------------- 【Initialisation】
fonction Search_Engine (Dom, SearchInput, SearchResultinner, SearchList) {
// tableaux de pinyin + caractères chinois + nombres
this.searchMemberArray = [];
// cul
this.dom = $ ("." + dom);
// Box de recherche
this.searchInput = "." + SearchInput;
// Boîte de résultats de recherche
this.searchResultinner = this.dom.find ("." + SearchResultinner);
// Liste de recherche d'objets
this.searchList = this.dom.find ("." + searchList);
// Convertissez en pinyin et enregistrez-le dans un tableau
this.transformpinyin ();
// Événement de recherche de liaison
this.searchactiveEvent ();
}
Search_engine.prototype = {
// -------------------------------------------- [Convertir en pinyin et enregistrer le pinyin, les caractères chinois et les chiffres en un tableau]
transformpinyin: function () {
// stocker temporairement des objets de données
$ ("body"). append ('<input type = "text">');
var $ pinyin = $ ("input.pingying-box");
for (var i = 0; i <this.searchList.length; i ++) {
// stockage le nom et le convertir en pinyin
$ pinyin.val (this.searchList.eq (i) .attr ("data-name"));
// convertir les caractères chinois en pinyin
var pinyin = $ pinyin.topinyin (). TolowerCase (). Remplace (/ s / g, "");
// caractère chinois
var cnCharacter = this.searchList.eq (i) .attr ("data-name");
//nombre
var numérique = this.searchList.eq (i) .attr ("data-phone");
// Enregistrer dans le tableau
this.searchMemberArray.push (pinyin + "&" + cncharacter + "&" + numérique);
}
// Supprimer l'objet de données de stockage temporaire
$ pinyin.remove ();
},
// --------------------------------- [Mots-clés de recherche floue]
Fuzzysearch: fonction (type, val) {
var s;
var returnArray = [];
// pinyin
if (type === "pinyin") {
S = 0;
}
// caractère chinois
else if (type === "cnCharacter") {
S = 1;
}
//nombre
else if (type === "Digital") {
S = 2;
}
for (var i = 0; i <this.searchMemberArray.length; i ++) {
// inclut des caractères
if (this.searchMemberArray [i] .split ("&") [s] .Indexof (val)> = 0) {
returnArray.push (this.searchMemberArray [i]);
}
}
retour returnArray;
},
// ------------------------------- [Résultats de la recherche de sortie]
PostMemberList: fonction (temparray) {
var html = '';
// il y a des résultats de recherche
if (temparray.length> 0) {
html + = '<li> Résultats de recherche (' + temparray.length + ') </li>';
pour (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>';
}
}
// Pas de résultats de recherche
autre{
if ($ (this.searchInput) .Val ()! = "") {
html + = '<li> pas de résultats de recherche ... </li>';
}autre{
this.searchResultinner.html ("");
}
}
this.searchResultinner.html (html);
},
// ----------------------------- [Événement de recherche de liaison]
SearchActiveEvent: function () {
var SearchEngine = this;
$ (document) .on ("keyup", this.searchInput, function () {
// stocker temporairement le tableau trouvé
var temparray = [];
var val = $ (this) .val ();
// Les règles régulières pour juger Pinyin
var pinyinrule = / ^ [a-za-z] + $ /;
// Les règles pour juger des caractères chinois
var cnCharacterrule = new regexp ("^ [/ u4e00- / u9fff] + $", "g");
// La régularité des entiers juger
var digitalrule = /^[-+
// ne recherche que 3 situations
// pinyin
if (pinyinrule.test (val)) {
temparray = SearchEngine.Fuzzysearch ("pinyin", val);
}
// caractère chinois
else if (cnCharacterrule.test (val)) {
temparray = SearchEngine.Fuzzysearch ("cnCharacter", val);
}
//nombre
else if (Digitalrule.test (Val)) {
Temparray = SearchEngine.Fuzzysearch ("Digital", Val);
}
autre{
SearchEngine.SearchResultinner.html ('<li> Pas de résultats de recherche ... </li>');
}
SearchEngine.PostMemberList (TempArray);
});
}
};
L'effet est-il très bon? Les amis peuvent l'utiliser dans leurs projets après l'avoir embelli