Cuando el volumen de datos no es grande y no hay una interfaz funcional correspondiente para el backend, el interfaz de frontend implementa básicamente algunas funciones de búsqueda simples. Lo usé recientemente. Escribí uno y lo publiqué para compartir contigo:
Imagen de reproducción:
Descripción de la función:
Después de presionar el teclado, busque los caracteres chinos en la entrada a tiempo y el pinyin y el número correspondiente a los caracteres chinos;
Ideas de implementación:
Primero convierta los caracteres chinos en la entrada a Pinyin, luego empalme los caracteres chinos, pinyin y números en cuerdas regulares y póngalos en una matriz. Luego, después de presionar el teclado, determine si el valor en la entrada es un carácter chino, pinyin o número, y luego bucle la matriz de acuerdo con una regla fija, para que se pueda encontrar la entrada correspondiente;
Activado:
// Search-test-inner ---> Div más externo
// Search-Value ---> Cuadro de entrada de entrada
// Search-Value-List ---> Los resultados de búsqueda muestran div Div
// Search-li ---> Entrada de búsqueda
nuevo Search_Engine ("Search-Test-Inner", "Search-Value", "Search-Value-List", "Search-Li");
Nota: La entrada de búsqueda es más dos datos temporales, nombre de datos y teléfono de datos, para almacenar caracteres y números chinos.
Nota: Un complemento llamado jQuery.hz2py-min.js se usa para convertir pinyin. Dado que este complemento solo puede convertir los valores en la entrada, hay un paso adicional en el código, primero coloque el valor en una entrada temporal y luego convertirlo.
HTML:
La copia del código es la siguiente:
<div>
<div>
<input type = "text" placeHolder = "Search">
<ul> </ul>
</div>
<div>
<ul>
<li data-name = "Warrior" data-phone = "13914157895">
<span> 13914157895 </span>
<span> guerrero </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> ladrones </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> mono </span>
</li>
<li data-name = "Neutenant" data-phone = "13815963258">
<span> 13815963258 </span>
<span> Asistente de Neutenant </span>
</li>
<li data-name = "Paladin" data-phone = "13815934258">
<span> 13815934258 </span>
<span> Paladin </span>
</li>
</ul>
</div>
</div>
CSS:
La copia del código es la siguiente:
* {relleno: 0; margen: 0; }
ol, ul {estilo list: ninguno; }
cuerpo {Font-size: 12px; Color:#333; }
.Search-test-inner {margen: 100px automático; relleno: 10px; Ancho: 400px; Antecedentes: #E0E0E0; Border-Radius: 10px; Shadow de caja: 1px 2px 6px #444; }
.Search-Val-Inner {Margin-Bottom: 20px; relleno: 10px; Antecedentes: #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 {ancho: 100%; Altura: 30px; Línea de altura: 30px; }
.tips {Font-Weight: Bold; }
JS:
La copia del código es la siguiente:
// --------------------------------------------------- 【Inicialización】
función search_engine (DOM, SearchInput, SearchResultInner, SearchList) {
// matrices de pinyin + caracteres chinos + números
this.SearchMemberArray = [];
// Asses
this.dom = $ ("." + dom);
// cuadro de búsqueda
this.searchinput = "." + SearchInput;
// Buzón de resultados de búsqueda
this.searchResultInner = this.dom.find ("." + SearchResultInner);
// Lista de búsqueda de objetos
this.searchList = this.dom.find ("." + SearchList);
// Convertir a Pinyin y guárdelo en una matriz
this.transformpinyin ();
// Evento de búsqueda vinculante
this.SearchActiveEvent ();
}
Search_engine.prototype = {
// -------------------------------------------- [Convertir a pinyin y guardar pinyin, caracteres chinos y números en una matriz]
transformpinyin: function () {
// almacenar temporalmente objetos de datos
$ ("cuerpo"). append ('<input type = "text">');
var $ pinyin = $ ("input.ingingy-box");
para (var i = 0; i <this.searchList.length; i ++) {
// Almacene el nombre y conviértalo en pinyin
$ pinyin.val (this.searchList.eq (i) .attr ("data-name"));
// convertir los caracteres chinos en pinyin
var pinyin = $ pinyin.topinyin (). tolowercase (). reemplazar (/s/g, "");
// carácter chino
var cncharacter = this.searchList.eq (i) .attr ("data-name");
//número
var digital = this.searchList.eq (i) .attr ("data-phone");
// Guardar en la matriz
this.SearchMemberArray.push (Pinyin + "&" + Cncharacter + "&" + Digital);
}
// Eliminar objeto de datos de almacenamiento temporal
$ pinyin.remove ();
},
// --------------------------------- [Palabras clave de búsqueda difusa]
FuzzySearch: function (type, val) {
var s;
var returnArray = [];
// pinyin
if (type === "pinyin") {
s = 0;
}
// carácter chino
else if (type === "cncharacter") {
s = 1;
}
//número
else if (type === "digital") {
s = 2;
}
para (var i = 0; i <this.searchmemberArray.length; i ++) {
// incluir personajes
if (this.searchmemberArray [i] .split ("&") [s] .indexof (val)> = 0) {
returnArray.push (this.SearchMemberArray [i]);
}
}
Return ReturnArray;
},
// ------------------------------- [Resultados de búsqueda de salida]
PostmemberList: function (temparray) {
var html = '';
// Hay resultados de búsqueda
if (temparray.length> 0) {
html + = '<li> Resultados de búsqueda (' + temparray.length + ') </li>';
para (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>';
}
}
// sin resultados de búsqueda
demás{
if ($ (this.searchinput) .val ()! = "") {
html += '<li> Sin resultados de búsqueda ... </li>';
}demás{
this.searchResultinner.html ("");
}
}
this.searchResultinner.html (html);
},
// ----------------------------- [Evento de búsqueda vinculante]
SearchActiveEvent: function () {
var searchEngine = this;
$ (documento) .on ("keyUp", this.searchInput, function () {
// almacenar temporalmente la matriz encontrada
var temparray = [];
var val = $ (this) .val ();
// Las reglas regulares para juzgar a Pinyin
var pinyinrule = /^[a-za-z]+$ /;
// Las reglas para juzgar caracteres chinos
var cncharacterRule = new Regexp ("^[/u4e00-/u9fff]+$", "g");
// La regularidad de juzgar enteros
var digitalRule = /^fic-+font>?d+(.d+)?$/;
// buscar solo 3 situaciones
// pinyin
if (pinyinrule.test (val)) {
temparray = SearchEngine.fuzzySearch ("Pinyin", val);
}
// carácter chino
else if (cncharacterrule.test (val)) {
temparray = SearchEngine.fuzzySearch ("cncharacter", val);
}
//número
else if (digitalRule.test (val)) {
temparray = SearchEngine.fuzzySearch ("digital", val);
}
demás{
SearchEngine.SearchResultInner.html ('<li> Sin resultados de búsqueda ... </li>');
}
SearchEngine.PostMemberList (TempArray);
});
}
};
¿El efecto es muy bueno? Los amigos pueden usarlo en sus proyectos después de embellecerlo