Autocomplete do JQuery + instrução "%" do SQL

Front-end
#1

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.
#2