Wenn das Datenvolumen nicht groß ist und für das Backend keine entsprechende funktionale Schnittstelle vorliegt, werden einige einfache Suchfunktionen im Grunde genommen vom Frontend implementiert. Ich habe es in letzter Zeit zufällig benutzt. Ich habe einen geschrieben und gepostet, um mit Ihnen zu teilen:
Reproduktionsbild:
Funktionsbeschreibung:
Suchen Sie nach dem Drücken der Tastatur nach den chinesischen Zeichen im Eintrag in der Zeit sowie der Pinyin und der Nummer, die den chinesischen Zeichen entsprechen.
Implementierungsideen:
Konvertieren Sie zuerst die chinesischen Zeichen im Eintrag in Pinyin, spleißen Sie dann die chinesischen Zeichen, Pinyin und Zahlen in reguläre Saiten und setzen Sie sie in ein Array. Stellen Sie nach dem Drücken der Tastatur fest, ob der Wert in der Eingabe ein chinesisches Zeichen, ein Pinyin oder eine chinesische Anzahl ist, und schleifen Sie das Array nach einer festen Regel, damit der entsprechende Eintrag gefunden werden kann.
Ermöglicht:
// Search-Test-Inner ---> äußerste Div
// such-value ---> Eingangseingangsbox
// Search-Value-List ---> Suchergebnisse anzeigen Div
// Search-li ---> Sucheintrag
New Search_Engine ("Search-Test-Inner", "Search-Value", "Search-Value-Liste", "Search-li");
HINWEIS: Der Sucheintrag ist plus zwei temporäre Daten, Datennamen und Data-Telefon, um chinesische Zeichen und Zahlen zu speichern.
Hinweis: Ein Plug-In namens JQuery.hz2py-min.js wird verwendet, um Pinyin zu konvertieren. Da dieses Plug-In die Werte nur in der Eingabe konvertieren kann, gibt es einen zusätzlichen Schritt im Code, den Wert zuerst in eine temporäre Eingabe einfügen und dann umwandeln.
HTML:
Die Codekopie lautet wie folgt:
<div>
<div>
<Eingabe type = "text" placeholder = "such">
<ul> </ul>
</div>
<div>
<ul>
<li data-name = "Warrior" data-phone = "13914157895">
<span> 13914157895 </span>
<Pan> Warrior </span>
</li>
<li data-name = "pastor" data-phone = "15112357896">
<Pan> 15112357896 </span>
<Pan> Pastor </span>
</li>
<li data-name = "Thieves" data-phone = "13732459980">
<Pan> 13732459980 </span>
<Pan> Diebe </span>
</li>
<li data-name = "druid" data-phone = "18015942365">
<Pan> 18015942365 </span>
<Pan> druid </span>
</li>
<li data-name = "monk" data-phone = "15312485698">
<Pan> 15312485698 </span>
<Pan> Affen </span>
</li>
<li data-name = "neurenant" data-phone = "13815963258">
<Pan> 13815963258 </span>
<Pan> Neurenant Assistent </span>
</li>
<li data-name = "paladin" data-phone = "13815934258">
<span> 13815934258 </span>
<Pan> paladin </span>
</li>
</ul>
</div>
</div>
CSS:
Die Codekopie lautet wie folgt:
* {Padding: 0; Rand: 0; }
ol, ul {Listenstil: Keine; }
Körper {Schriftgröße: 12px; Farbe:#333; }
.Search-Test-Inner {Margin: 100px Auto; Polsterung: 10px; Breite: 400px; Hintergrund: #e0e0e0; Border-Radius: 10px; Box-Shadow: 1PX 2PX 6PX #444; }
.Search-Val-Inner {Margin-Bottom: 20px; Polsterung: 10px; Hintergrund: #fff; }
. }
.search-value-list {margin-top: 10px; }
.search-value-list li {padding: 5px; }
.Member-list-innere .search-li .phone,
.search-value-list li .phone {float: rechts; }
.search-value {width: 100%; Höhe: 30px; Zeilenhöhe: 30px; }
.Tips {Schriftgewicht: BOLD; }
JS:
Die Codekopie lautet wie folgt:
//---------------------------------------------------【Initialisierung】
Funktionssuche_Engine (DOM, SearchInput, SearchResultInner, SearchList) {
// Arrays von Pinyin + chinesische Zeichen + Zahlen
this.searchMemberArray = [];
// Esel
this.dom = $ ("." + dom);
// Suchfeld
this.searchInput = ".". + searchInput;
// Suchergebnisfeld
this.searchResultInner = this.dom.find ("." + SearchResultInner);
// Suchliste von Objekten
this.searchList = this.dom.find ("." + SearchList);
// Konvertieren Sie in Pinyin und speichern Sie es in ein Array
this.transformpinyin ();
// Binding -Suchereignis
this.searchActiveEvent ();
}
Search_engine.prototype = {
// ---------------------------------------- [Konvertieren Sie Pinyin und Speichern Sie Pinyin, chinesische Zeichen und Zahlen in ein Array]
Transformpinyin: function () {
// Datenobjekte vorübergehend speichern
$ ("body"). append ('<input type = "text">');
var $ pinyin = $ ("Input.Pingying-Box");
für (var i = 0; i <this.searchList.length; i ++) {
// Speichern Sie den Namen und konvertieren Sie ihn in Pinyin
$ pinyin.val (this.searchList.eq (i) .Attr ("Datenname"));
// Chinesische Zeichen in Pinyin konvertieren
var pinyin = $ pinyin.topininyin (). TolowerCase (). Ersetzen (/s/g, "");
// chinesischer Charakter
var cncharacter = this.searchList.eq (i) .attr ("Datenname");
//Nummer
var digital = this.searchList.eq (i) .Attr ("Datenphone");
// im Array speichern
this.searchMemberArray.push (Pinyin + "&" + cncharacter + "&" + digital);
}
// Temporäre Speicherdatenobjekt löschen
$ pinyin.remove ();
},
// ----------------------------- [Fuzzy-Suchschlüsselwörter]
fuzzysearch: function (type, val) {
var S;
var returnArray = [];
// Pinyin
if (type === "pinyin") {
S = 0;
}
// chinesischer Charakter
else if (type === "cncharacter") {
S = 1;
}
//Nummer
sonst if (type === "digital") {
S = 2;
}
für (var i = 0; i <this.searchMemberArray.length; i ++) {
// Zeichen einschließen
if (this.searchMemberArray [i] .Split ("&") [s] .Indexof (val)> = 0) {
returnArray.push (this.searchMemberArray [i]);
}
}
Return ReturnArray;
},
// --------------------------- [Ausgabe der Suchergebnisse]
postmitgliste: function (tempArray) {
var html = '';
// Es gibt Suchergebnisse
if (temparray.length> 0) {
html + = '<li> Suchergebnisse (' + temparray.length + ') </li>';
für (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>';
}
}
// keine Suchergebnisse
anders{
if ($ (this.searchInput) .val ()! = "") {
html += '<li> Keine Suchergebnisse ... </li>';
}anders{
this.searchResultInner.html ("");
}
}
this.searchResultInner.html (html);
},
// ----------------------------- [Binding Search Event]
SearchActiveEvent: function () {
var searchEngine = this;
$ (dokument) .on ("keyUp", this.searchInput, function () {
// das gefundene Array vorübergehend speichern
var temparray = [];
var val = $ (this) .val ();
// Die regulären Regeln für die Beurteilung von Pinyin
var pinyInrule = /^[a-za-z]+$ /;
// Die Regeln für die Beurteilung chinesischer Charaktere
var cncharacterRule = new regexp ("^[/u4e00-/u9fff]+$", "g");
// die Regelmäßigkeit der Beurteilung von Ganzzahlen
var digitalRule = /^ ·-+ weibliches?d+(.d+)?$/;
// nur nach 3 Situationen suchen
// Pinyin
if (pinyinrule.test (val)) {
tempArray = searchEngine.fuzzysearch ("pinyin", val);
}
// chinesischer Charakter
sonst if (cncharacterRule.test (val)) {
tempArray = searchEngine.fuzzysearch ("cncharacter", val);
}
//Nummer
sonst if (digitalRule.test (val)) {
tempArray = searchEngine.fuzzysearch ("digital", val);
}
anders{
SearchEngine.searchResultinner.html ('<li> Keine Suchergebnisse ... </li>');
}
SearchEngine.PostMemberList (Temparray);
});
}
};
Ist der Effekt sehr gut? Freunde können es in ihren Projekten verwenden, nachdem sie es verschönert haben