Auto Completar com Jquery

[kania 0]

Olá pessoal,

 

Alguém sabe onde posso encontrar um exemplo de auto completar com Jquery que faça o seguinte:

 

Em campo tipo Text eu vou digitando os dados e em div abaixo ele vai mostrando os dados encontrado com os parâmetros que eu digitei.

Parece ser igual ao auto complete normal utilizado por vários sites como Google, mas não é, em vez de aparecer uma div abaixo do do campo input text com os dados encontrados, neste caos vai aparecer uma tabela com os dados, porem somente com os dados, inclusive nesta tabela colocarei um campo checkbox para seleção dos dados que eu quero para depois incluir no banco de dados.

[William Bruno 1501]

não conheço, mas nem é tão dificil de desenvolver ^_^

 

tente. Garanto que será um ótimo aprendizado.

[kania 0]

Alguma dica por onde começar Willian Bruno?

[William Bruno 1501]

eu sempre começo pelo html.

 

vai, faz o formulário.

ai você cria a UL, com várias LIs, contendo supostos resultados.

 

posiciona essa UL embaixo do input, no qual vai ser chamado o suggest.

feito isso, você pode partir pro php

 

faz a consulta.. e faz o retorno que você precisa.

 

feito isso, você faz o ajax.

na função de sucess, pegue o retorno do teu arquivo php, e dê alert( data );

 

apenas para ver se tá vindo certo.

Feito isso, você pode usar um .html( data );

 

e mostrar onde você quer que apareça.

são vários passos. O ajax é o de menos, o mais simples nesse caso.

[kania 0]

O mais simples é montar o html, as buscas no banco de dados msql.

 

Me bato somente na hora de trazer os dados via jquery, neste caso como preciso fazer é algo parecido com este exemplo http://gregweber.info/projects/demo/flavorzoom.html porem eu não quero que a tabela já venha preenchida e sim seja preenchida conforme eu vou digitando os dados que que procuro, inclusive com esta mesma forma, ao lado esquerdo um checkbox e ao lado direito os dados encontrados.

 

Não quero trazer a tabela preenchida porque vai conter mais de 2800 registros, isto deixara ela muito grande pesada para abrir, até porque os dados vão ver de um banco de dados.

 

alguma dica de como modificar estes código.

[XauDH 0]

O mais simples é montar o html, as buscas no banco de dados msql.

 

Me bato somente na hora de trazer os dados via jquery, neste caso como preciso fazer é algo parecido com este exemplo http://gregweber.info/projects/demo/flavorzoom.html porem eu não quero que a tabela já venha preenchida e sim seja preenchida conforme eu vou digitando os dados que que procuro, inclusive com esta mesma forma, ao lado esquerdo um checkbox e ao lado direito os dados encontrados.

 

Não quero trazer a tabela preenchida porque vai conter mais de 2800 registros, isto deixara ela muito grande pesada para abrir, até porque os dados vão ver de um banco de dados.

 

alguma dica de como modificar estes código.

 

Pra enviar as letras que o usuario vai digitando e trazer os resultados você pode usar:

 

$.post('arquivo.php', {texto:$('input[name=busca]').val()},
function ( valor ) {
    // 'valor' é o que o jQuery vai retornar da página 'arquivo.php'
    alert( valor );
})

Pra cada letra digitada uma nova consulta que vai conter, sei lá, um limite com os dez primeiros resultados (não colocar um limite talvez não seja legal, até pelo que você falou: ela ficará muito grande e pesada pra abrir) da forma que o Willian Bruno sugeriu (essa tag ul já vai vir do php dessa forma):

 

<ul>
    <li>Resultado 1</li>
    <li>Resultado 2</li>
    <li>Resultado 3</li>
    <li>Resultado 4</li>
    <li>Resultado 5</li>
    <li>Resultado 6</li>
    <li>Resultado 7</li>
    <li>Resultado 8</li>
    <li>Resultado 9</li>
    <li>Resultado 10</li>
</ul>

A pagina.php vai fazer a consulta no banco de acordo com o valor da variavel 'texto' que será passada por POST.

 

Conforme o usuário vai completando a palavra, o numero de resultados vai diminuir até chegar no que ele precisa.

 

Espero ter ajudado, abraço.