Quando o volume de dados não é grande e não há interface funcional correspondente para o back -end, algumas funções de pesquisa simples são basicamente implementadas pelo front -end. Por acaso, usei recentemente. Eu escrevi um e o publiquei para compartilhar com você:
Imagem de reprodução:
Descrição da função:
Depois de pressionar o teclado, procure os caracteres chineses na entrada no tempo e o pinyin e o número correspondentes aos caracteres chineses;
Ideias de implementação:
Primeiro, converta os caracteres chineses na entrada em Pinyin, depois cedam os caracteres chineses, pinyin e números em cordas regulares e coloque -os em uma matriz. Então, depois de pressionar o teclado, determine se o valor na entrada é um caractere chinês, pinyin ou número e, em seguida, faça um loop da matriz de acordo com uma regra fixa, para que a entrada correspondente possa ser encontrada;
Habilitado:
// Search-Test-Inner ---> Div mais externo
// Pesquisa-Value ---> Caixa de entrada de entrada
// Search-Value-List ---> Resultados da pesquisa mostram div
// Search-Li ---> Pesquisar entrada
new Search_engine ("Testes de pesquisa-interna", "Valor da pesquisa", "Lista de pesquisa-valor", "Search-Li");
NOTA: A entrada de pesquisa é mais dois dados temporários, nome de dados e phone de dados, para armazenar caracteres e números chineses.
Nota: Um plug-in chamado jQuery.hz2py-min.js é usado para converter o pinyin. Como esse plug-in só pode converter os valores na entrada, há uma etapa extra no código, primeiro coloque o valor em uma entrada temporária e depois converta-o.
Html:
A cópia do código é a seguinte:
<div>
<div>
<input type = "text" placeholder = "pesquisa">
<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">
<pan> 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">
<pla> 18015942365 </span>
<pan> druid </span>
</li>
<li data-name = "monge" data-phone = "15312485698">
</span> 15312485698 </span>
<pan> Monkey </span>
</li>
<li data-name = "neutenant" data-phone = "13815963258">
<mpan> 13815963258 </span>
<pan> Assistente neutro </span>
</li>
<li data-name = "paladin" data-phone = "13815934258">
<span> 13815934258 </span>
<pan> paladin </span>
</li>
</ul>
</div>
</div>
CSS:
A cópia do código é a seguinte:
* {preenchimento: 0; margem: 0; }
OL, UL {estilo de lista: nenhum; }
corpo {tamanho da fonte: 12px; Cor:#333; }
.Search-test-Inner {margem: 100px Auto; preenchimento: 10px; Largura: 400px; Antecedentes: #e0e0e0; Radio de fronteira: 10px; Shadow de caixa: 1px 2px 6px #444; }
.Search-Val-Inner {Margin-Bottom: 20px; preenchimento: 10px; Antecedentes: #FFF; }
.MBERL-List Inner .Search-Li {preenchimento: 10px; }
.Search-Value-List {margin-top: 10px; }
.Search-Value-List Li {preenchimento: 5px; }
.MBER-LIST-INER .Search-Li .Phone,
.Search-Value-List Li .Phone {Float: Right; }
.search-value {largura: 100%; Altura: 30px; altura de linha: 30px; }
.tips {font-weight: BOLD; }
JS:
A cópia do código é a seguinte:
// --------------------------------------------------- 【Inicialização】
function search_engine (DOM, SearchInput, SearchResultinner, Searchlist) {
// Matrizes de pinyin + caracteres chineses + números
this.searchMemberArray = [];
// bundas
this.dom = $ ("." + dom);
// Caixa de pesquisa
this.searchInput = "." + SearchInput;
// Caixa de resultados de pesquisa
this.searchResultinner = this.dom.find ("." + SearchResultinner);
// Lista de pesquisa de objetos
this.searchList = this.dom.find ("." + Searchlist);
// converter para pinyin e salvá -lo em uma matriz
this.TransFormpinyIn ();
// Evento de pesquisa de ligação
this.searchActiveEvent ();
}
Search_engine.prototype = {
// -----------------------------------
transformpinyin: function () {
// armazenar temporariamente objetos de dados
$ ("corpo"). Anexe ('<type de entrada = "text">');
var $ pinyin = $ ("input.pinging-box");
for (var i = 0; i <this.searchList.length; i ++) {
// armazenar o nome e convertê -lo em pinyin
$ pinyin.val (this.searchList.eq (i) .attr ("Data-name"));
// converte caracteres chineses em pinyin
var pinyin = $ pinyin.topinyin (). tolowerCase (). substitua (/s/g, "");
// personagem chinês
var cncharacter = this.searchList.eq (i) .attr ("Data-name");
//número
var digital = this.searchList.eq (i) .attr ("Data-phone");
// Salvar na matriz
this.searchMemberArray.push (pinyin + "&" + cnchcharacter + "&" + digital);
}
// Excluir objeto de dados de armazenamento temporário
$ pinyin.remove ();
},
// --------------------------------- [Palavras-chave de pesquisa difusa]
Fuzzysearch: function (tipo, val) {
var s;
var retornArray = [];
// pinyin
if (type === "pinyin") {
s = 0;
}
// personagem chinês
caso contrário, if (type === "cncharacter") {
s = 1;
}
//número
caso contrário, se (tipo === "digital") {
s = 2;
}
for (var i = 0; i <this.searchMemberArray.length; i ++) {
// inclui caracteres
if (this.searchMemberArray [i] .split ("&") [s] .IndexOf (val)> = 0) {
returnArray.push (this.searchMemberArray [i]);
}
}
return retornArray;
},
// ------------------------------- [Resultados da pesquisa de saída]
Pós -membro da Lista: Função (Temparray) {
var html = '';
// Existem resultados de pesquisa
if (temparray.length> 0) {
html + = '<li> Resultados da pesquisa (' + temparray.length + ') </li>';
for (var i = 0; i <temparray.length; i ++) {
var sarray = temparray [i] .split ("&");
html += '<li>';
html + = '<pan>' + sarray [2] + '</span>';
html + = '<pan>' + sarray [1] + '</span>';
html += '</li>';
}
}
// Sem resultados de pesquisa
outro{
if ($ (this.searchInput) .val ()! = "") {
html += '<li> Sem resultados de pesquisa ... </li>';
}outro{
this.searchResultinner.html ("");
}
}
this.searchResultinner.html (html);
},
// ----------------------------- [Evento de pesquisa de ligação]
SearchActiveEvent: function () {
var searchEngine = this;
$ (documento) .on ("keyup", this.searchInput, function () {
// armazenar temporariamente a matriz encontrada
var temparray = [];
var val = $ (this) .val ();
// as regras regulares para julgar Pinyin
var pinyinRule = /^[a-za-z]+$ /;
// as regras para julgar os caracteres chineses
var cncharacterRule = new regexp ("^[/u4e00-/u9fff]+$", "g");
// A regularidade de julgar números inteiros
var DigitalRule = /^, /+ ]d+(.d+)?$/;
// Pesquise apenas por 3 situações
// pinyin
if (pinyinrule.test (val)) {
temparray = SearchEngine.fuzzysearch ("Pinyin", Val);
}
// personagem chinês
else if (cncharacterrule.test (val)) {
temparray = searchengine.fuzzysearch ("cncharacter", val);
}
//número
else if (digitalRule.test (val)) {
temparray = searchengine.fuzzysearch ("digital", val);
}
outro{
SearchEngine.searchResultinner.html ('<li> Sem resultados de pesquisa ... </li>');
}
SearchEngine.PostMemberlist (Temparray);
});
}
};
O efeito é muito bom? Amigos podem usá -lo em seus projetos depois de embelezar