Criar um autocomplete

[gremio10 14]

Fala galera, eu to a um bom tempo pesquisando por um autocomplete, mas eu não consigo nem achar, e nem construir sozinho...

 

Não sei como poderia construir um bom sistema de autocomplete para poder utilizar no meu site..

 

Alguém poderia me ajudar ?

 

Obrigado.

[William Bruno 1501]

mas eu não consigo nem achar, e nem construir sozinho...

sério? oO

 

hoje em dia tá tão fácil achar um.. até eu fiz um q ta no meu blog..

 

 

 

Alguém poderia me ajudar ?

Ajudo sim, qual a dúvida?

 

começa sempre do básico ok?

 

faz ai o html+css estático.

Gera uma UL LI estática com dados fixos, e posiciona ela embaixo do input. Consegue fazer ?

 

 

depois disso prosseguimos.

[gremio10 14]

Consegue fazer ?

Sarcástico você em ^^

 

Fazer um assim, com ul - li, eu tinha conseguido, mas não sei qual evento usar, como fazer para que ele possa descer com a setinhas...

[Kakashi_Hatake 267]

Veja se é isso que você procura :seta: http://www.devbridge.com/projects/autocomplete/jquery/

 

Procure por ajax autocomplete

[William Bruno 1501]

Sarcástico você em ^^

foi só uma pergunta mesmo.. se não eu teria que voltar um passo e te ajudar nisso.

Até o segundo post, eu não sabia em qual parte do processo estava a sua dúvida.

 

 

Fazer um assim, com ul - li, eu tinha conseguido

posta ai, somente depois disso q tem como prosseguirmos.

 

 

, mas não sei qual evento usar

uma coisa de cada vez..

mas o evento pode ser o onkeypress ou onkeyup

 

, como fazer para que ele possa descer com a setinhas...

ai complica um pouco, pois precisamos de um elemento navegável como <a> ou <input />

porém, uma coisa de cada vez... faz o input com UL e LIs, e posta.

 

Depois disso faremos a requisição para popular, e ai termina com as setas.

[gremio10 14]

Okok :lol:

 

aí vai:

 

index.phtml

 

<input type="text" name="autocomplete" />

<div id="div"></div>

<script type="text/javascript">
$( function() {

$( "input[name=autocomplete]" ).keypress( function() {

	var $this = $( this );
	var $this_value = $this.val();
	var url = "json.phtml"; #fictício 

	$( "#div" ).html( "" );

	$.post( url, { query: this_value }, function( html ) { 

		$( "#div" ).html( html );

	} );

} );

} );
</script>

 

json.phtml

 

<ul>
<?php
	foreach( $this->result as $values )
	{
?>
		<li><?php echo $values[ "nome" ] ?></li>
<?php
	}
?>
</ul>

 

Carlos Coelho, eu havia achado esse plugin, tentei implementa-lo, mas o problema está na hora de tentar criar o resultado dinâmico...

 

Obrigado pela ajuda

[William Bruno 1501]

Ok, qual a dúvida agora ?

 

tá bacana o seu código.

Esse é o meu:

http://wbruno.com.br/blog/2010/01/08/suggest-ajax-jquery-phpmysql/

[gremio10 14]

Beleza, agora assim, para poder fazer com que ao descer com as setas do teclado, ele vá acompanhando, e caso eu clique fora da minha div, fazer com que ele feche, teria de fazer uma div global e verifica se ele clica nela ?

[William Bruno 1501]

teria de fazer uma div global e verifica se ele clica nela ?

geralmente eu faço isso com um click no body, pois o body é o pai de tudo ne?!

apenas lembrando de dar um event.stopPropagation() no click do input, e do suggest, se não eles tb disparariam o click do body.

http://wbruno.com.br/blog/2011/10/26/menu-dropdown-abrindo-click-fechando-ao-clicar-fora/

 

 

Tô montando um exemplo das setas aqui.

http://wbruno.com.br/blog/2011/11/19/navegando-pela-lista-suggest-setas-teclado-autocomplete-teclado-javascript/

[gremio10 14]

William, não entendi muito bem seu código, e uma dúvida me veio, como fazer o que você fez em um código aonde ele vem por outro html ?

 

meu código até agora:

 

index.phtml - JS

var autocomplete = $( "#div" );
       autocomplete.hide();

       $( "#sintomas" ).keypress( function( e ) {

           e.stopPropagation();

           var $this = $( this );
           var $this_value = $this.val();
           var url = "<?php echo $this->serverUrl( $this->baseUrl( "index/json" ) ) ?>";

           if( $this_value != "" )
           {
               $.post( url, { query: $this_value, box: "sintomas" }, function( html ) {
                   autocomplete.html( html ).show();
               } );
           }

           alert( autocomplete.length );

       } );

       $( "#div" ).click( function( e ) {
           e.stopPropagation();
       } );

       $( "body" ).click( function() {
           autocomplete.hide();
       } );

 

index.phtml - html

 

<form method="post">
                       <input name="search" type="text" class="sintomas" id="sintomas" autocomplete="off" />
<div id="div" style="position:absolute; top:342px; z-index:99999; margin-left: 40px;"></div>
                       <input type="submit" value=" " id="search-item-symptoms" />                        
                   </form>

 

json.phtml

 

<style type="text/css">
   #autocomplete { background-color: #FBF9F0; border:1px solid #D9C69F; width: 349px; max-height: 200px; min-height: auto; overflow: auto; }
   #autocomplete li { padding:15px; color:#574620; font-size:15px; }
   #autocomplete li:hover { background-color: #D9C69F; color:#FEFDFA; }
</style>

<ul id="autocomplete">
   <?php
       foreach( $this->html as $html )
       {
   ?>
           <a href=""><li><?php echo $html[ "nome" ] ?></li></a>
   <?php
       }
   ?>
</ul>

 

Obrigado

[William Bruno 1501]

não entendi muito bem seu código

qual deles ?

 

 

como fazer o que você fez em um código aonde ele vem por outro html ?

eu não entendi isso.

Como assim ?

Tanto faz, a fonte de onde veio o html. A linguagem javascript será capaz de manipular qq html, tanto gerado, qnto fonte, qnto inserido.

Apartir do momento em que este estiver disponível na estrutura DOM.

 

 

não vejo sentido em você trazer essa tag <style> junto do ajax. Já deixa isso pronto lá do lado de fora.

Qual problema/dúvida você está enfrentando agora ?

[gremio10 14]

William, ta dificil fazer aqui...

 

o código que não entendi foi o do key up e down, dentro da ul...

 

fiz umas modificações no meu código, agora fiz para adicionar no click, mas ainda não consigo nem imaginar como fazer para navegar pelo teclado.

 

index.phtml:

 

<ul id="autocomplete" style="position:absolute; top:342px; z-index:99999; margin-left: 40px;"></ul>

<script type="text/javascript">

var autocomplete = $( "#autocomplete" );
       autocomplete.hide();

       $( "#sintomas" ).keydown( function( e ) {            

           e.stopPropagation();

           var $this = $( this );
           var $this_value = $this.val();
           var url = "<?php echo $this->serverUrl( $this->baseUrl( "index/json" ) ) ?>";

           if( $this_value != "" )
           {
               $.post( url, { query: $this_value, box: "sintomas" }, function( html ) {
                   generateHTML( html );
               }, "json" );

               autocomplete.show();
           }

       } );

       function generateHTML( json )
       {
           $( "#autocomplete" ).html( "" );

           $.each( json, function( e, val ) {

               $( "<li></li>" ).html( "<a href='' class='autocomplete-link'>" + val.nome + "</a>" ).appendTo( "#autocomplete" );

           } );
       }

       $( "#div" ).click( function( e ) {
           e.stopPropagation();
       } );

       $( "body" ).click( function() {
           autocomplete.hide();
       } );

       $( ".autocomplete-link" ).live( "click", function( e ) {

           e.preventDefault();

           var value_text = $( this ).text();

           $( "#sintomas" ).val( value_text );

       } );

</script>

 

minha json.phtml agora retorna valores por JSON.

 

montar o ul e populando com li está funcionando, podendo clicar em um também está, só que ai entra um novo problema, eu terei de deixar o usuário adicionar vários valores, então ele teria de dar um "," e escrever, e ele pesquisar novamente... mas ai de novo, não consigo nem pensar em como fazer.

 

Obrigado

[William Bruno 1501]

não consigo nem imaginar como fazer para navegar pelo teclado.

eita.. mas tá pronto lá o código.

tá bem simples cara.. conforme você vai apertando a seta para baixo(e identifico isso pelo keyCode do evento), vou somando 1 em uma variavel.

 

Essa variavel, vai trocando o bg da lista. você tinha percebido isso ?

 

 

então ele teria de dar um "," e escrever, e ele pesquisar novamente...

olha aqui:

$( "#sintomas" ).val( value_text );

é neste instante em que você joga o texto no input, certo ?

 

para jogar mais de um:

var sintomas_antigos = $( "#sintomas" ).val();
$( "#sintomas" ).val( sintomas_antigos+', '+value_text );

entendeu ?

 

conforme forem vindos valores, eles serão concatenados e pronto. Vai inserindo um depois do outro, com uma virgula entre eles.

[gremio10 14]

você tinha percebido isso ?

tinha sim, apenas me perdi um pouco no código.

 

conforme forem vindos valores, eles serão concatenados e pronto. Vai inserindo um depois do outro, com uma virgula entre eles.

ok, ok, mas como fazer assim:

 

digito "como", ele me retorna "como fazer um autocomplete", beleza, eu adiciono um ",", agora, como fazer para que o código desconsidere o que foi escrito, e faça uma nova pesquisa ?

 

Obrigado.

[William Bruno 1501]

como fazer para que o código desconsidere o que foi escrito, e faça uma nova pesquisa ?

apague o campo, e feche a lista.

 

ai o cara vai se ver obrigado a digitar novamente para fazer a outra pesquisa.

 

---

 

agora entendi o problema.. você está escrevendo no mesmo campo, em que a pesquisa é feita.

 

estilo o input de emails do hotmail ne?!

ele vai dando o autocomplete, e ele mesmo vai escrevendo..

 

cara, a melhor solução para oque o hotmail faz, que eu consegui pensar, de usar um único input para buscar e registrar: os anteriores, não sejam de fato parte do value. Mas sim um elemento posicionado com css por cima do input.

veja:

 

http://wbruno.com.br/blog/2011/05/19/input-de-destinatariospara-hotmail/

entendeu ?

 

 

da outra forma, realmente adicionando no value e colocando virgulas, você teria que tratar no server-side, algo como dar explode() em virgula, e só considerar a ultima posição do array para a busca.

[gremio10 14]

Entendi, vou dar mais uma olhada nos que tem na net, mas obrigado pela paciência e ajuda.

[gremio10 14]

Acabei por conseguir usar o plugin que o Carlos Coelho sugeriu, ai queria ver com vocês, se teria como e (como ?) ao selecionar um valor pelo autocomplete, ele adicionar uma virgula no final da palavra, para já iniciar uma nova pesquisa.

 

 

Obrigado