Desenvolvimento Web, javascript

Simple AutoComplete JQuery Plugin

DOWNLOAD

http://blog.idealmind.com.br/exemplos/simpleautocomplete/simpleautocomplete.rar

DEMO

http://blog.idealmind.com.br/exemplos/simpleautocomplete/

ENGLISH

Simple AutoComplete JQuery Plugin screenshot

The Simple JQuery AutoComplete Plugin allows you to add autocomplete functionality easily in text fields on your site.

It also has resources to bring other data in the autocomplete list, as the id of the element, performing a callback function to store these data in other inputs.

You can also:
* Use multiple autocomplete on the same page
* Pass an extra parameter to filter the results of a sql query
* Stylize each autocomplete in different ways.

How to use it

To use the Simple AutoComplete JQuery Plugin is very easy. Just use the syntax:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="simpleautocomplete.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#input_fied_id").simpleAutoComplete("query_processor.php");
	});
</script>

Enter the css that will be used to style the auto complete:

<link rel="stylesheet" type="text/css" href="simpleAutoComplete.css" />

And the field that will run the autocomplete:

<input type="text" id="input_fied_id" name="estado" />

Optional Features:

Callback Function

You can use a callback function that will be performed by selecting an autocomplete item, bringing extra data.

To do it, use the syntax:

<script type="text/javascript">
	$(document).ready(function(){
		$("#input_fied_id").simpleAutoComplete("query_processor.php",null,callbackfunctionName);
	});

	// And create a callbackfunction
	function callbackfunctionName( par )
	{
		$("#id_estado").val( par[0] );
	}
</script>

The variable ‘par’ is a vector with additional data brought by the query for each item (stored in an attribute of the item).

The callback is useful for you to bring other data beyond what appears in the autocomplete, as the id of an autocomplete option, or any other data (see the demo that illustrates this feature) to be returned by the file that runs the query, and store it in the input “id_estado” (you can bring as many parameters as you want, and store them in different fields).

Optional parameters

You can use the optional parameters to add more detail and customize each autocomplete.

identifier : to enable the file (eg php) that will process the query to identify which query is processed, and to identify an autocomplete on a page that has more than one autocomplete.

autoCompleteClassName : if you want to use a custom css class name (default ‘autocomplete’). This is useful to avoid conflicts, or if you want to style each autocomplete differently.

selectedClassName : has the same purpose autoCompleteClassName, but applies for the pre-selected autocomplete item, eg, on mouse over (default ‘sel’).

attrCallBack : if you want to store the parameters that will be passed to the callback function in other list attribute (default ‘rel’).

extraParamFromInput : useful if you want to pass an additional parameter to the query, in order to filter the results. This value must be one input field (this way the value can be variable).

Compatibility

Simple AutoComplete version 1.1.0 has been tested, exhibiting the same behavior in the following browsers: IE6, IE7, IE8, Safari, Chrome and Firefox.





PORTUGUÊS

Hoje eu criei um novo sistema autocomplete, para substituir o antigo que estava tento bugs no IE. Este autocomplete é um plugin JQuery, fácil de integrar e customizar.

Simple AutoComplete JQuery Plugin screenshot

O Simple AutoComplete JQuery Plugin permite que você adicione a funcionalidade de autocomplete facilmente em campos de texto do seu site.

Ele também possui recursos para trazer outros dados na lista do autocomplete, como o id do elemento, executando uma função de callback para armazenar estes dados em outros inputs.

Você ainda pode:
* utilizar vários autocompletes numa mesma página
* passar um parâmetro extra para filtrar os resultados de uma consulta sql
* estilizar cada autocomplete de maneiras diferentes.

Como usar

Para usar o Simple AutoComplete JQuery Plugin é muito fácil. Basta usar a sintaxe:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="simpleautocomplete.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#input_fied_id").simpleAutoComplete("query_processor.php");
	});
</script>

Insira o css que será usado para estilizar o auto complete:

<link rel="stylesheet" type="text/css" href="simpleAutoComplete.css" />

E o campo que será executado o autocomplete:

<input type="text" id="input_fied_id" name="estado" />

Recursos opcionais:

Função de Callback

Você pode utilizar uma função de callback, que será executada ao selecionar um item do autocomplete, trazendo dados extras.

Para isso, utilize a sintaxe:

<script type="text/javascript">
	$(document).ready(function(){
		$("#input_fied_id").simpleAutoComplete("query_processor.php",null,callbackfunction);
	});

	// E crie a função de callback
	function callbackfunction( par )
	{
		$("#id_estado").val( par[0] );
	}
</script>

A variável ‘par’ é um vetor com dados adicionais trazidos pela consulta para cada item (armazenados em um atributo do item).

O callback é util para você trazer outros dados além do que aparecerá no autocomplete, como o id de uma opção do autocomplete, ou qualquer outro dado (veja o demo que exemplifica esta funcionalidade), que será retornado pelo arquivo que executará a consulta, e armazenar no input “id_estado” (você pode trazer quantos parâmetros quiser, e armazená-los em campos diferentes).

Parâmetros opcionais

Você pode utilizar os parâmetros opcionais para adicionar mais detalhes e personalizar cada autocomplete.

São eles:

identifier : útil para que o arquivo (php por exemplo) que processará a consulta possa identificar qual consulta será processada, e para identificar um autocomplete numa página que tenha mais de um autocomplete.

autoCompleteClassName : caso você queira utilizar um nome de classe css diferente da padrão (padrão ‘autocomplete’). Isso é útil para evitar conflitos, ou caso você queira estilizar diferentemente vários autocompletes.

selectedClassName : tem o mesmo propósito de autoCompleteClassName, porém se aplica à opção pré-selecionada dos resultados do autocomplete (padrão ‘sel’).

attrCallBack : caso você queira que os parâmetros que serão passados para a função de callback sejam armazenados em um atributo diferente do padrão, que é ‘rel’.

extraParamFromInput : útil caso você queira passar um parâmetro adicional à consulta, com o intuito de filtrar os resultados. Este valor deve estar em um campo input (desta forma o valor pode ser variável).

Compatibilidade

O Plugin simpleAutoComplete foi testado apresentando o mesmo comportamento, nos seguintes navegadores: IE6, IE7, IE8, Safari, Chrome e Firefox.

Licence

This plugin is under GNU GENERAL PUBLIC LICENSE.





106 Comments

  1. GuerrieroNero
    Hi,

    This plugin is perfect!!! But there is one problem: IE… it doesn’t work good with Internet Explorer…it’s a CSS problem…have u any hack for it?
    Thanks from Italy!

    • Hi GuerrieroNero!

      There’s a session that explains how to adjust it for IE (search by ‘To solve problems of positioning the autocomplete in IE6′ in this page). You can only set width and height into input text, or add a hack into CSS file.

      Best regards

  2. Paulo Cesar
    Olá, sou iniciante em programação para internet. Tentei implementar seu código, mas, não consegui fazê-lo funcionar…
    O IE8 acusa o seguinte erro: “O objeto não dá suporte para a propriedade ou método” e identifica o seguinte local: “$(‘#txtNomeAluno’).simpleAutoComplete(…”.
    Acredito ter feito exatamente como indicastes.

    Podes me in

  3. Paulo Cesar
    … Podes me indicar algo a fazer para resolver esse problema?
  4. Simone
    I solved the problem of IE without hacks. It works for me, I hope it helps.
    Now the css style works for IE6, IE8 and Firefox:

    Solution – Alter the file simpleAutoComplete.js.

    Steps:

    1 – Delete the if “if (navigator.appVersion.match(‘MSIE 6′)){ … }”.

    2 – Insert the code above after the line “autoCompleteList.insertAfter(thisElement);”:

    var position = thisElement.position();
    var height = thisElement.height();
    var width = thisElement.width();

    $(‘div.’ + classAC).css({
    ‘top’: (height+position.top+6) + ‘px’,
    ‘left’: (position.left)+’px’,
    ‘margin’: ’0px’
    });
    $(‘div.’ + classAC + ‘ ul’).css({
    ‘margin-left’: ’0px’
    });

    3 – Ready to use!

    • Obrigado Simone!

      Eu ia tirar um fds para fazer esta atualização de forma a tornar o plugin plug and play.

      Vou fazer alguns testes e vou incluir a atualização!

      Muito obrigado!

  5. Atualizei o plugin para a versão 1.1.0.

    Incluí as atualizações da @Simone , que torna padrão o comportamento do autocomplete no IE6, IE7, IE8, Firefox, Chrome e Safari.
    Inclui também o fechamento automático ao se clicar fora do autocomplete, e a iserção automática do atributo autocomplete=”off”, para evitar conflitos com o autocomplete do browser.

  6. jorge
    Wellingtohn, este seu modelo baixo, nao seria “field”ao inves de “fied” ?

    $(“#input_fied_id”).simpleAutoComplete(“query_processor.php”);

  7. Aingel
    Hello Guys! I like the plugin!

    However, I’m getting a problem: When I press ENTER, I am able to put the value of the selected item from the list but the submitted form returns the search criteria (I typed on the form field) but not the selected item from the list (or the value that sent to the form field).

    to be clearer:
    - I have a form named: txtSearchField
    - I typed ‘me’ and the list came up with a selection
    - I scrolled up and down using the arrow keys, the plugin worked well with the selection routine
    - Once I decided to select an item ‘Mexico’ (for example)
    - ‘Mexico’ appears on the form field: txtSearchField
    - The form submits
    - The submitted info yields txtSearchField = ‘me’ and not ‘Mexico’ as intended/expected

  8. Robson Miranda
    @jorge
    Tanto faz, esse “#input_fied_id” é só uma referencia ao plugin de qual a id do campo que ele deve processar…
    ao tipo

    no jquery ficaria assim:

    $(“#Robson”).simpleAutoComplete(“query_processor.php”);

    Entendeu??

  9. jorge
    Robson, deu tudo certo. abraço.
  10. jorge
    Robson, qual o caminho para este simpleautocomplete mostrar no autocomplete conforme o primeiro exemplo: ao digitar Rio de Janeiro mostra tambem a sigla :
    Rio de Janeiro (RJ) ??
  11. lucio
    cara usei teu script poré eu gostaria que quando ele filtrasse os dados e a pessoa andasse com as setas cima/baixo e pressionasse enter ele levasse o valor da linha onde o cursor está para om input…no teu exemplo ele faz correto, porém pra mim não funciona de geito nenhum
  12. jorge
    @Robson Miranda
    Robson, usando o JQuery, qual o caminho para que no simpleautocomplete mostrar dados adicionais como no autocomplete? pelo primeiro exemplo temos: ao digitar Rio de Janeiro mostra tambem a sigla :
    Rio de Janeiro (RJ) . temos como fazer isto pelo simpleautocomplete ?
  13. Thales
    Is it works with ASP? If yes can anyone tell me the select statement of SQL ?

    exp. Select * from dbo.customers Where Customername LIKE ?????….

  14. Raphael
    Hi!
    Primeiramente quero agradecer pelo tutorial, é mt bom.
    Bom eu queria a opção de “select_first”, eu procurei no script do plugin e não vi nenhuma referencia, queria saber se ele possibilita essa função.
  15. Thiago
    Bicho nao existe uma maneira de colocar direto um objeto json ao contratrio de uma pagina pra ajax?!?!
    • somente se vc estiver trabalhando com dados fixos, e não com consulta ao banco de dados.
  16. Excelente tutorial!!! Há muito tempo procurava um ‘suggest’ pra colocar no meu site. Parabéns!!
  17. jorge
    Wellington Ribeiro :
    somente se vc estiver trabalhando com dados fixos, e não com consulta ao banco de dados.

    Wellington, usando o JQuery, qual o caminho para que no simpleautocomplete mostre dados adicionais como no autocomplete? pelo primeiro exemplo (autocomplete),temos: ao digitar Rio de Janeiro mostra tambem a sigla :
    Rio de Janeiro (RJ) . temos como fazer isto pelo simpleautocomplete ?

    • Sim… basta você trazer o campo adicional da sigla, e concatenar com o nome do estado/cidade. Veja o exemplo do arquivo php.
  18. Junior
    Achei excelente!!! Muito leve mas estou com o mesmo problema do Lucio.
    Não consigo fazer funcionar o enter ao selecionar os dados.
    Porém, utilizando o exemplo do Wellingon, não há problemas….
    Alguém tem idéia do que possa ser?
  19. Rafael Miranda
    Estou tentando adaptar o código para funcionar com ASP, teria como ajudar? Não sei muito de php e não consegui fazer… Talvez se você colocar a forma como os dados precisam sair ser captado corretamente pelo javascript torná-lo funcional, fique fácil de adaptar o código.
    • Olá Rafael!

      Bom, eu tive pouquíssimo tempo para desenvolver a documentação, mas assim que der, eu usarei a sua sugestão. Mas é simples: o servidor deve dar uma saída gerando uma lista em html, com os parâmetros opcionais para callback. Analisando um pouquinho mais o código php, e fazendo a analogia com o asp, você vai entender.

      Peço desculpas, mas agora estou com tempo curto (como sempre! rs), e não posso te ajudar muito…

      Abraço!

  20. Damith
    How to make this work with jQuery 1.2.6?
    • Hi Damith!

      The plugin was not tested in JQuery 1.2.6. Why you don’t upgrade your JQuery lib?

      Best regards

  21. Pedro Reis
    Muito bom mesmo! Mas tenho um problema particular. Eu tenho um formulario em que estou usando o autocomplete para buscar os registos da banco de dados. Ao submeter este formulario é criado um pdf dentro de uma iframe que está abaixo do formulario. Se eu quiser fazer novo pedido o pdf fica-me por cima do autocomplete e nao consigo ver os registos que o auto complete me sugere. Ja experiementei alterar o z-index, mas nao resolve. Tem alguma ideia?
    • Olá Pedro!

      Bom, quando comecei a ler, a primeira coisa que me veio à cabeça foi o z-index.

      Você setou o z-index nas duas divs, a que carrega o iframe e o auto complete (.autocomplete)?

      Estou com pouco tempo agora para efetuar testes :(

      Abraço!

  22. Seq
    @Aingel

    lucio :
    cara usei teu script poré eu gostaria que quando ele filtrasse os dados e a pessoa andasse com as setas cima/baixo e pressionasse enter ele levasse o valor da linha onde o cursor está para om input…no teu exemplo ele faz correto, porém pra mim não funciona de geito nenhum

    Yep! I have this problem too. Please help somebody!

    • Olá!

      A funcionalidade de dar enter e selecionar o item é automática, e não precisa de nenhuma configuração adicional.
      Qual o navegador que você está usando?

      Abraço!

  23. alexander
    @Aingel
    here is my workaround for problem with submitting form when you select item from list using “enter”-key:

    1. find this string in js-code:
    thisElement.keyup(function( ev )
    and replace it with:
    thisElement.keydown(function( ev )

    2. find this code:
    if (kc == 13)
    {
    $(‘div.’ + classAC + ‘ li.’ + selClass).trigger(‘click’);
    }
    and replace it with:
    if (kc == 13)
    {
    $(‘div.’ + classAC + ‘ li.’ + selClass).trigger(‘click’);
    return false;
    }

  24. Alexandre
    Olá Wellington,

    o plugin tá funcionando certinho só tem um probleminha, acredito que seja no css. No ie (pra variar) e no natscape, a div de pesquisa fica atrás dos textos e do form. Já usei o z-index bem estourado para essa div (10000000000) e negativo para os campos de input e ainda assim dá esse erro.

    Mexi no script js para ajustar a div para um z-index alto mais não funciona. Vc pode me dar uma dica de como eu resolvo isso?

  25. Gilberto
    Olá estou precisando clonar o autocomplete, alguma sugestãod e como poderia fazer?
  26. Denis Veneno
    Caro Wellington,
    Primeiro quero agradecer-lhe pela contribuição.

    Estou tentado utilizar sua ferramenta no localhost (utilizando o easyphp) porém não estou conseguindo êxito, já fiz alguns testes fazendo a conexão e busca dos dados pelo index.php, e a query retornou os resultados, então, presumisse que a consulta está sendo efetuada perfeitamente.
    Já testei, pela exibição do código-fonte do mozilla, a existência dos arquivos: jquery.js, simpleAutoComplete e simpleAutoComplete.css, e todos eles estão sendo carregados.

    Você teria alguma ideia do que está causando este probleminha?? ainda não testei direto no meu servidor de hospedagem, porém gostaria de utiliza-lo no localhost para implementar melhor.

    Atenciosamente

    • Oi Denis!
      verifique se o código php está seguindo o padrão da documentação, de forma a gerar os dados corretos para a leitura do js.

      Me passe o código que você está utilizando para eu ver o que você está tentando fazer.

  27. Weza
    @Wellington Ribeiro
    Wellington, aposto que eles estavam a usar Mozilla Firefox ou Google Chrome como eu. A funcionalidade do Enter só funciona com o IE pelo menos na versão 8, na versão 9(beta) tb n funciona e a caixa de sugestão texto fica em baixo.
  28. Max
    legal cara até dava para fazer uma doção porem com essa licen nem louco, mude para bsd ou lgpl e recebera muitas mais doações
  29. Alexandre
    @Wellington Ribeiro
    Olá Wellington.

    É um aplicativo que estou montando para uma empresa. Se vc me passar algum email para que eu poss te mandar o link para vc visualizar o que ocorre fica mais fácil.

    Já tentei várias formas de acerto e nada. Não consigo entender o porquê que isso ocorre uma vez que mexi no z-index (css e js) e nada. A coisa tá feia de arrumar.

    Se vc puder me ajudar eu agradeço.

    PS. Os campos de input e os textos são gerados dinamicamente (objetos). Não sei se isso tem um pouco de interferência. Mais no ie (pra variar…) e no netscape a coisa num rola.

  30. adriano dos Santos
    OI Wellington.
    Estou com o mesmo problema do Alexandre.
    Quando gero campos input por php(dentro de um laço), os auto-completes funcionam, mas quando gero os input dinamicamente( por javascript), os autos-completes não funcionam.
    Se puder me ajudar.
  31. Christian
    Oi, tem um bug que aparece no IE8 aprox na linha 144. Aqui está a correçao:

    if(content != null) { // fix para erro no IE8 quando vc pressiona up-down varias vezes
    content = content.replace(//i,”"); // iE8 busca case-sensitive, aqui uso regex case-insensitive
    content = content.replace(//i,”"); // idem
    content = content.replace(“&”,”&”);
    jQuery(‘#textoBusqueda_autocomplete’).val(content);
    }

    []s

  32. Julio
    Olá Wellington,

    Em primeiro lugar, meus parabéns pelo ótimo trabalho que fizestes. Eu estou com um problema na utilização do autocomplete, pois quando me vem a lista de sugestões e teclo enter o formulário é submetido. Mas isso só acontece quando programa a função de callback para setar o valor de um campo hidden. Quando o callback seta campos text não acontece o problema.

    Abraço,
    Julio

  33. Olá, como faço pra limitar, tipo a pessoa digita, 3 letras dai começa aparecer os resultados…
    não apartir de 1… porque minha consulta aqui é muito grande e aparece muita coisa.. digitando apenas a letra ‘a’
  34. Mic
    Hi,

    Thank’s for your script. It works fine except with keypad 0. If i enter, for example, 100 on main keyboard it works well an fores as soon as I enter a 0. But on the keypad, I need to press space in order to fire the result. Any idea how to correct this?

    Thank’s,
    Mic

  35. Olá, fiz algumas alterações no plugin, adicionei uma propriedade para filtrar somente quando a 3° letra for digitada, porque filtrar desde a primeira letra, nao me servia;.

    no php, coloque um

  36. if (is_string($_REQUEST['query']) && strlen($_REQUEST['query']) > 2 && strlen($_REQUEST['query']) < 64)
    {
  37. olá, estou com um problema, quando usei o

    ele da pau, no enter!!

    tipow ele digita, dai aperta a flecha para baixo, dai quando da enter ele nao envia no form o valor! sabe como posso arumar isso ?

  38. Jefferson
    Olá, gostaria de saber se é possível chamar o simpleautocomplete a partir de uma classe css? Por exemplo: $(‘.classe_css’).simpleAutoComplete()… Tentei de várias formas aqui. Alguém pode me dar um help? obrigado
    • Sim, desde que a classe aplique a um e somente um input. Mas não recomendo o uso de classes, pois estas podem se aplicar a mais de uma elemento e causar conflito no autocomplete.

      O ideal é utilizar um id, pois segue os padrões w3c.

      Abraço!

  39. joao
    Olá, tenho uma página com um número dinâmico de textfields que exigem autocomplete, dependendo da base de dados. É possível tornar os parâmetros de javascript dinâmicos para poderem ler qualquer textfield? Ou para cada textfield com autocomplete tenho de criar uma função de callback? obrigado, abraço
  40. Denis Veneno
    Wellington,
    Não te respondi antes pois viajei e dei uma pausa no sistema que estava implementando.
    Testei novamente, porém, diretamente no servidor (em vez de testar no localhost daqui da empresa) onde o sistema está alocado e o plugin está funcionando perfeitamente.

    Novamente volto a agradece-lo, imensamente, pela contribuição para a comunidade.

    Um abração!

  41. Olá,

    Como retiro o parametro query? Utilizo codeigniter e não aceita parametro por url, então quero passar apenas a url direto para url sem a ?query=$var , é possível com seu plugin?

    Algo do tipo: paraname:false?

  42. CACA-COBRA
    Existe alguma forma de por um “preloader” neste plugin?
  43. Olá..
    Espetacular seu script, custei muito a encontrar algo de facil implementação e suprisse minha necessidade principal, o preenchimento de um campo hidden com o ID.
    Mas estou escrevendo pra tirar uma duvida, a respeito do uso das setas para navegar na lista e em seguida o uso da tecka Enter para selecionar o registro e preencher o campo.
    No meu caso só funciona com o clique do mouse, ou seja, tem que clicar no nme do estado, ou os campos extras nao sao preenchidos. Obs.: Editei o script pra limitar somente a ID e NOME.
    Agradeço a ajuda desde já,

    Boa noite.

    Sandro.

  44. Raphael Santos
    Sandro MF :
    Olá..
    Espetacular seu script, custei muito a encontrar algo de facil implementação e suprisse minha necessidade principal, o preenchimento de um campo hidden com o ID.
    Mas estou escrevendo pra tirar uma duvida, a respeito do uso das setas para navegar na lista e em seguida o uso da tecka Enter para selecionar o registro e preencher o campo.
    No meu caso só funciona com o clique do mouse, ou seja, tem que clicar no nme do estado, ou os campos extras nao sao preenchidos. Obs.: Editei o script pra limitar somente a ID e NOME.
    Agradeço a ajuda desde já,
    Boa noite.
    Sandro.

    Estou com o mesmo problema pois como o meu botão (input) é do tipo submit, quando aperta o enter envia o formulário sem selecionar o estado corretamente .. o ideal era q não submetesse o form no enter se o usuário tiver selecionando o item na lista. Só submeter quando o item já tiver selecionado.

  45. Emilio
    amazing script, congrats

    thanks from Palermo(IT)

  46. Camillo Targas
    1-Qual é o formato que tem que ter a saida do arquivo de busca? Estou tentando fazer com jsp e não consigo entender o que foi feito no php. Poderia ate disponibilizar um exemplo de query_processor..jsp

    2-O meu também não funciona o enter, so clicando, algué conseguiu resolver isso?

    Parabéns pelo trabalho e desde já agradeço a toda ajuda!

  47. Primeiramente, parabenizo o Wellington pelo script, ficou show de bola aqui no sistema.

    Bom, estou com o mesmo problema do Lucio e de outros 2 colegas aqui. Quando começo a digitar a palavra no campo, aparece o resultado no autocomplete certinho; porém ao selecioná-lo com as setas do teclado e pressionar “enter”, não carrega para o “input”.

    Pelo que percebi, acontece quando colocamos a busca (input) dentro de um formulário ” “. Ao tirar o formulário funciona normalmente, mas não serve, pois não é possível submeter (cadastrar).

    Se o mestre aí conseguir resolver essa, ou nos orientar, ficarei mais grato ainda.

  48. Caro Wellington,

    Baixei os arquivos e rodou perfeitamente. Parabéns!

    Adaptei para o meu site e agora preciso fazer uma busca num único campo fazendo o ajax ler de 3 campos sql diferentes.

    Por exemplo quando começar a digitar num campo só, ele faça a busca em 3 campos de sql.

    Segue exemplo que deu certo, mostra tudo correto porém ele “come” cada letra digitada nas buscas da listagem abaixo que são os outros 2 campos sql:

    ———————————-
    $sql = “SELECT DISTINCT psoldagem1, psoldagem2, psoldagem3 FROM qualificacoes WHERE locate(‘$q1′,psoldagem1) > 0 OR locate(‘$q2′,psoldagem2) > 0 OR locate(‘$q3′,psoldagem3) > 0 ORDER BY locate(‘$q1′,psoldagem1), locate(‘$q2′,psoldagem2), locate(‘$q3′,psoldagem3) LIMIT 10″;
    $r = mysql_query( $sql );
    if ( $r )
    {
    echo ”.”\n”;
    while( $l = mysql_fetch_array( $r ) )
    {
    $p1 = $l['psoldagem1'];
    $p2 = $l['psoldagem2'];
    $p3 = $l['psoldagem3'];
    @$p1 = preg_replace(‘/(‘ . $q1 . ‘)/i’, ‘$1′, $p1);
    @$p2 = preg_replace(‘/(‘ . $q2 . ‘)/i’, ‘$2′, $p2);
    @$p3 = preg_replace(‘/(‘ . $q3 . ‘)/i’, ‘$3′, $p3);
    echo “\t”.”. $p1 .”.”\n”;
    echo “\t”.”. $p2 .”.”\n”;
    echo “\t”.”. $p3 .”.”\n”;
    }
    echo ”;
    }
    ———————————-

    Então, a minha dúvida é como fazer essa busca em 3 campos sql diferentes sem que ele suma com as letras digitadas.

    Aguardo retorno, pode ser por email mesmo.

    Abraço.

  49. rodrigo
    Boa tarde Wellington,

    Primeiramente parabens pelo tópico e por outras soluções maneiras, como essa.

    Apliquei ela em meu sistema, mas estou com alguns probleminhas…a variavel q do arquivo php esta sempre indo nula…
    Já viu isso acontecer? Desculpa o incomodo.
    Abs

  50. Fábio
    Muito bom seu script, poré tenho um probleminha, quando digito algumas letras e seleciono com as setas do teclado uma opçãoe dou enter o formulario é submetido sendo que não é isso que eu quero, queria apenas q o campo fosse preenchido.

    Qual seria a solucao para isso.

    abraço,

  51. Mesmo problema do enter, poxa só faltou isso pra ficar perfeito. O outro autocomplete é muito lento para retornar os dados.

    alguem ai conseguiu resolver ou encontrou um script sem esse problema e que retorne os dados do banco com rapidez? se sim, por favor podem me informar.

    vanderson_ruiz@hotmail.com

  52. Marcus Perrout
    cara.. ja fiz de tudo pra tentar colocar para reconhecer palavras com acento na busca.. e nao vai.. sabe o pq? desde ja agradeco.. o script eh mt bom!
  53. Gente, me desculpe pela demora em responder, mas estou muito sem tempo.

    Prometo que em breve pegarei todas as sugestões e dúvidas para aprimorar o plugin.

    Agradeço a todos pelos comentários.

  54. João Luis
    Parabéns pela solução que vc deu a neste script. Muito enxuta e bem estruturada.

    Não é só técnica, tem que ter criatividade!

    Valeu,

    Jõao.

  55. Rodrigo Poli
    Wellingtor otimo plugin que você desenvolveu. Eu to com um problema na versão 1.6 do JQuery que ao dar o enter ele não carrega o valor selecionado para o imput somente o input de callback. Tem alguma solução para isso?
  56. Rodrigo Poli
    @Rodrigo Poli
    Para funcionar dentro do JQuery 1.6.1 eu alterei a linha thisElement.attr(‘value’, el.text()); por
    thisElement.val(el.text());
  57. Wellington, baixei seu script, bem legal mas só funciona em Localhost. No servidor aparece o seguinte Erro:

    $(“#pesquisa_autocomplete”).simpleAutoComplete is not a function
    Arquivo-fonte: http://www.portogente.com.br/portopedia2/
    Linha: 52

    ja verifiquei se importei mais de 1x se da incompatibilidade ou nao, ja criei variavel pra colocar no lugar do ‘$’ e ja conferi se os arquivos estao no lugar certo, está tudo certo esses itens, fiquei um tempão no google e nada.. pq esse erro acontece? Obrigado desde ja

  58. Yoong
    Hi man,
    Thank you for your plugin, very useful.
    How can I modify your code to add another parameter: a delay (in seconds).
    Indeed, with your plugin, when the user input one caracter, the plugin makes the ajax call.
    Sometimes, it’s better to wait 1 or 2 seconds: then the plugin will make the ajax call with a word, not a letter. Do you understand my question?
    So, maybe I need to rewrite your code and replace keyup?
  59. Carlos Ernica
    @Fábio
    Olá Fábio, vc conseguiu resolver o problema? também estou com o mesmo caso.

    abraço

  60. Begun, the great internet eudatcion has.
  61. This makes everything so cmoepltely painless.
  62. Pedro
    Prezado Wellington,

    Eu fiz tudo conforme você falou. A conexão com o banco está correta, pois quando eu entro na página ajax.php ele exibe 10 estados. Problema é quando eu abro a index.html, a página fica em branco. Nada acontece. localhost/ajax/index.html e nada. Eu tenho o wamp instalado aqui. Existe algum parâmetro que deve ser habilitado no wamp relacionado ao PHP? Alguma função? Fico no aguardo. Obrigado. Pedro

  63. Cara, o seu plugin é show de bola! Utilizei ele fazendo algumas adaptações para as inúmeras necessidades minha e funcionou como uma luva! Parabéns por compartilhar seus conhecimentos com a galera!
  64. Juninho Boni
    @Marcus Perrout
    Caro Marcus, dá uma olhada:

    pra html:

    pro php:

  65. Qual seu problema com o Enter? Aqui coloquei um return false e ao usar o Enter para selecionar um registro na lista o campo é preenchido normal. Só tem que depois clicar no Submit.
  66. Wellington,
    muito bom seu auto complete, porém gostaria de saber se tem como colocar um scroll vertical.
    Já tentei de tudo e nao consigo achar nada a respeito.
    Parabéns e obrigado.

    Se mais alguem puder ajudar, desde agradeço.

  67. roberto
    Funciona bem em um servidor windows apache mysql, mas nao funcionou em um servidor linux, algum segredo para fazer funcionar?
  68. mauricio
    Olá, primeiro quero agradecer esse script. muito útil e prático
    segundo tenho uma dúvida.. se existe algum tipo de limite para o retorno? só to conseguindo retornar em 3 inputs, mesmo vendo com firebug que a li tem todos os valores que eu quero.
    Obrigado
  69. mauricio
    @mauricio
    consegui hehe
  70. Raphael
    Sandro valeu a sua dica, fica aqui como resolvi o Enter:

    Dentro do input de busca coloque: onKeyDown=”javascript:if(event.keyCode == 13){ return false; }”

    Testei dentro de um <form e o resultado que obtive foi:
    Você digita a busca, aparece os itens, ai você seleciona com o teclado e preciona enter e pimba!!!! Testei no Firefox e no Chrome e deu certo…

    O único problema (não sei se é um) é que se você digitar na busca um nome e não selecionar nada na lista e precionar enter ele não vai fazer nada…

    Espero ter ajudado alguém!

  71. Salve turma! Bom dia a todos…
    Estou aqui denovo, mas agora com uma duvida: saber se alguem já tentou usar este script no navegador do Android 2.1. Bem tentei e nao funciona, porem nos sistemas operacionais mais comuns vai tranquilo… Se alguem tiver uma ideia do que deve ser isto? Seja uma limitação do Android ou não, favor informar aqui.. Um abraço a todos!
  72. Roseval Mello
    Wellington,

    Não teria como você colocar as imagens igual ao primeiro exemplo que não está funcionando do Chrome?
    A lupa, o loading e a imagem de excluir ajudam a interatividade do sistema, assim como as ações que elas proporcionam.
    Se puder fazer isso neste segundo exemplo ia ser muito show.

  73. Romulo
    Olá. Muito bom o plugin ainda mais pela parte do extraParam e o callback. Mas eu gostaria de personalizar a lista. Quando a lista é montada no LI eu coloquei uns e uns spans formatados para poder montar uma lista bem completa. Fica legal a exibição porém ao clicar ele coloca todo o conteúdo no input text. Seria bom informar qual o campo que será exibido quando for selecionado pois daí eu não estou podendo montar listas compostas, só simples.

    Mas independente disso está funcionando muitíssimo bem. Obrigado e parabéns.

  74. Romulo
    @xcontrol

    Coloque um DIV e um css bobo vc consegue.

  75. Estou usando o autocomplete funciona blz….mas quando eu carrego a página dentro de uma DIV ele perde a funcionalidade…alguém sabe como posso resolver.

    Grato pela atenção!!!

  76. Fábio Sigueru
    Teria como informar qual foi a solução referente a má funcionalidade no Chrome?
    Fico no aguardo.
  77. Gilberto Machado
    Amigo Wellington…

    Eu estou utilizando o seu autocomplete que por sinal é muito bom, eu só tenho uma dúvida…
    Eu estou usando para buscar pessoas em um banco de dados, e no caso quando digito por exemplo “gilberto” se eu não utilizar o autocomplete, ou seja, uma das opções que ele oferece, a busca não retorna todos os “gilbertos” do banco de dados…

    Você poderia me ajudar?

    Desde já, muito obrigado e parabéns.

  78. Gilberto Machado
    @Gilberto Machado
    cara, ignorância minha… resolvido.. obrigado
  79. U are bad. I simply love u
  80. Parabéns pelo seu plugin, obrigado por compartilhar!
  81. Luiz Rio Branco
    Boa tarde galera,
    eu estou tentando usar este script, o unico problema que estou tendo ate o momento é:
    ele me retorna os dados mas nao consigo clicar para selecionar e nem consigo usar as setas do teclado para selecionar a informacao que eu quero.
    Desde ja agradeco a ajuda.
  82. Vitor
    Boa noite, é só colocar utf8_encode dentro do ajax aonde busca os dados
  83. Jefferson Deroza
    Em primeiro lugar, parabéns pelo plugin, é excelente.
    Uma dúvida, vc teria algum exemplo de uso com banco de dados e Asp Net?
    Preciso finalizar uma aplicação urgente utilizando esse recurso.
    Obrigado e até mais.
  84. @Marcus Perrout
    Faz um tempão que postou sua pergunta, quase dois anos, sobre a questão dos acentos. Não sei se conseguiu ou desistiu. E talvez outras pessoas também tenham o problema. Está no tipo de codificação da página, configurado para UTF-8, o que faz com que os caracteres acentuados não sejam reconhecidos como tal, e sim como um conjunto ASCII diferente do armazenado no Banco de Dados. Para solucionar, na linha onde se recebe os dados via REQUEST, adicionei um comando utf8-decode, e funcionou perfeitamente.
    O que era: $q = mysql_real_escape_string($_REQUEST['query']);
    Ficou: $q = utf8_decode(mysql_real_escape_string($_REQUEST['query']));
    Só para caso mais alguém tenha o mesmo problema.
    E o script ficou especial. Valeu muito ao autor!
  85. Nicolas
    Great Autocomplet that works properly in most cases… ut I’m experiencing an issue with Chrome on tactile screen : I just get no answer from the request ! Has someone experienced the same issue ?
    Thank you for helping…
  86. how can we request 2 parameters.

    ..
    ..
    ..
    identifier: ‘estado’,'var2′,

    like this?

  87. @André G. Silveira
    Vlw André, isso funciona mesmo, uso um sistema todo em ansi, e ao enviar os dados pelo autocomplete o jquery usa um termo padrão “term” para pegar o valor passado, pequei a variavel passando pelo utf8_decode de pronto. A string do sql pode ser feita normalmente passando no LIKE a variavel decodificada. Para simplificar, basta pegar o valor passado pelo autocomplete com utf8_decode.
  88. Sergio
    Esse autocomplete salvou minha vida, consegui fazer ele funcionar aqui, a unica coisa que eu queria era fazer aparecer o indicator.gif carregando quando a gente digita no input. Alguém sabe qual atributo eu tenho que colocar no css????
  89. Os links dos exemplos (demo) estão com problemas, mais eu fiz download do código e funciona perfeitamente em MySQL.
    Eu e a comunidade de desenvolvedores agradecemos sua contribuição.
  90. Edgard
    Wellington, pesquisei muito aqui até achar o seu código. Estava tendo problemas com o reconhecimento de registros com acentos. Muito obrigado pela sua ajuda.
  91. Watson
    Bom dia galerinha!!!
    Em primeiro lugar, agradecer ao excelente AUTOCOMPLETE. Parabéns! Wellington Ribeiro.
    O Auto complete funciona perfeitamente… Adaptei a minha realidade, que seria um cadastro de cliente… Até aí tudo bem. Porém como se trata de vários clientes é comum que aparece duas ou mais “MARIA APARECIDA DA SILVA”, pra não ficar selecionando uma por vez pra conferir os dados utilizei a variável do $cpf pra diferenciar. No antigo autocomplete conseguia fazer isso sem que, ao clicar para selecionar o nome, o CPF fosse junto com o nome para o input, mas nesse não consegui. E isso acaba atrapalhando na hora de editar o cliente, pois o CPF dele fica logo após o nome no BD. Alguém consegue resolver isso. Já fiz comparações entre os dois Autocomplete, mas ainda nada.
    Desde já agradeço.

Trackbacks / Pings

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>