Eu utilizo o autocomplete do JQuery e para fazer as buscas no banco eu também utilizo a instrução “%” do SQL.
O grande problema é que quando se usa o “%” no input, você perde uma grande ferramenta do autocomplete
que é deixar em negrito as palavras encontradas na lista.
Eu encontrei uma solução para esse problema, então irei compartilhar com vocês explicando o problema e
posteriormente dando a solução encontrada.
Vamos vizualizar um exemplo prático. Imagine que temos um cadastro de produto abaixo:
Produto
Codigo Descrição
001 Camisa de Futebol Corinthians
002 Camisa de Futebol Santos
003 Camisa de Futebol Brasil
004 Camisa de Basquete Corinthians
005 Camisa de Basquete Brasil
EX.: Quando não é necessário usar o “%”:
No Input você digita: Camisa
Lista do Autocomplete:
Camisa de Futebol Corinthians
Camisa de Futebol Santos
Camisa de Futebol Brasil
Camisa de Basquete Corinthians
Camisa de Basquete Brasil
O problema todo começa aqui. EX.: Quando é necessário usar o “%”:
No Input você digita: Camisa%
Lista do Autocomplete:
Camisa de Futebol Corinthians
Camisa de Futebol Santos
Camisa de Futebol Brasil
Camisa de Basquete Corinthians
Camisa de Basquete Brasil
Como na lista não existe nenhuma palavra "Camisa%", o autocomplete não
marca em negrito as palavras Camisa que estão no início do registro. Na verdade,
é exatamente isso que está significando a instrução SQL “Camisa%”.
Imagine que você queira fazer uma pesquisa de todas as camisas de Futebol, a
instrução do SQL ficaria “Camisa%Futebol%”. vamos visualizar o exemplo:
No Input você digita: Camisa%Futebol%
Lista do Autocomplete:
Camisa de Futebol Corinthians
Camisa de Futebol Santos
Camisa de Futebol Brasil
Como na lista não existe nenhuma palavra "Camisa%Futebol%", o autocomplete novamente
não marcará em negrito nem as palavras Camisa, e nem as palavras Futebol.
[color=darkred] SOLUÇÃO:[/color]
Eu fiz uma pequena alteração na função responsável em deixar em negrito as palavras encontrada
na lista. Dentro do arquivo jquery.autocomplete.js existe a seguinte função:
$.Autocompleter.defaults={inputClass:"ac_input",
...
highlight:function(value,term){
return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)("+term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi,"\\$1")+")(?![^<>]*>)(?![^&;]+;)","gi"),
"<strong>$1</strong>");
},scroll:true,scrollHeight:180};
Alterando a função acima para interpretar a instrução SQL, ficará assim:
$.Autocompleter.defaults={inputClass:"ac_input",
...
highlight:function(value,term){
// Cria um array das palavras da pesquisa
listTerm = term.split("%");
/* Coloca em negrito cada palavra da pesquisa
* encontrada na lista
*/
for (i=0; i<listTerm.length; i++) {
value = value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)("+listTerm[i].replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi,"\\$1")+")(?![^<>]*>)(?![^&;]+;)","gi"),
"<strong>$1</strong>");
}
return value;
},scroll:true,scrollHeight:180};
Espero que essa dica ajudem-nos e recomendo o uso do autocomplete da JQuery que é uma ótima ferramenta web.
Um abraço e bons códigos a todos.