Alguem ai entende de Ajax?

8 respostas
J

Pessoal, preciso fazer uma coisa bem simples em ajax, preciso que no browser, ao digitar o nome de pessoas, vá filtrando conforme as letras digitadas, igual acontece com o site do google,por exemplo, se digitar "A", somente aparecerá uma lista com o nem de pessoas que iniciem com a letra "A", já tenho o código e tenho o banco com o nome das pessoas, só não sei fazer essa ligação do ajax com o banco pra quando for digitado fazer a busca naquela tabela do banco que tem o nome das pessoas, alguém sabe fazer isso?
Vou postar o código html e o código php aqui embaixo pra vocês verem como está.

html>
  <head>
    <script type="text/javascript">
      function showHint(str) {
        if(str.length == 0) {
          document.getElementById("txtHint").innerHTML = "";
          return;
        }
        if(window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
        }
        else {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
          }
        }
        xmlhttp.open("GET","ajax_2.php?q=" + str,true);
        xmlhttp.send();
      }
    </script>
  </head>
  <body>
    <h3>Start typing a name in the input field below:</h3>
    <form action="">
      First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
  </body>
</html>

código php:

<?php

	$a[]="Anna";
	$a[]="Brittany";
	$a[]="Cinderella";
	$a[]="Diana";
	$a[]="Eva";
	$a[]="Fiona";
	$a[]="Gunda";
	$a[]="Hege";
	$a[]="Inga";
	$a[]="Johanna";
	$a[]="Kitty";
	$a[]="Linda";
	$a[]="Nina";
	$a[]="Ophelia";
	$a[]="Petunia";
	$a[]="Amanda";
	$a[]="Raquel";
	$a[]="Cindy";
	$a[]="Doris";
	$a[]="Eve";
	$a[]="Evita";
	$a[]="Sunniva";
	$a[]="Tove";
	$a[]="Unni";
	$a[]="Violet";
	$a[]="Liza";
	$a[]="Elizabeth";
	$a[]="Ellen";
	$a[]="Wenche";
	$a[]="Vicky";

	$q = $_GET["q"];
	if(strlen($q) > 0) {
		$hint = "";
		for($i=0; $i < count($a); $i++) {
			if(strtolower($q) == strtolower(substr($a[$i],0,strlen($q)))) {
				if($hint == "") {
					$hint = $a[$i];
				}
				else {
					$hint = $hint . " , " . $a[$i];
				}
			}
		}
	}
	if($hint == "") {
		$response = "no suggestion";
	}
	else {
		$response = $hint;
	}
	echo $response;
	
?>

agora só tenho que fazer a ligação do código php com o banco pra puxar o dados e ler esse código php no código html pra quando for digitado no browser acontecer a filtragem dos nomes como já está acontecendo.

8 Respostas

drsmachado

Se já filtra os nomes, precisará apenas incluir uma consulta ao banco, passando como parâmetro, os caracteres recebidos.

M

Usa esse componente aqui: http://loopj.com/jquery-tokeninput/

drsmachado

Creio que ele já passou desta etapa, ele apenas precisa realizar a consulta no banco de dados.

cezbatistao

Cara o q vc tah querendo fazer seria isso aqui?

http://www.devbridge.com/projects/autocomplete/jquery/

drsmachado

jct:

agora só tenho que fazer a ligação do código php com o banco pra puxar o dados
e ler esse código php no código html pra quando for digitado no browser acontecer a [color=red]filtragem dos nomes como já está acontecendo.[/color]

P

O nome da tecnica que vc precisa fazer é “autocomplete”. E nesse codigo que vc postou basta trocar o conteudo das linhas 36 a 46 pelo codigo SQL pra buscar no banco de dados lembrando que o que vc digitou na tela esta dentro da variavel “q”.

M

Não sei se vcs se deram o trabalho de baixar o demo, mas lá contém um código PHP de exemplo, para vc utilizar o componente =)

Podem me corrigir se eu estiver enganado, mas creio que é isso que o autor do tópico quer.

O Código que liga com o banco de dados para trazer as opções, right?

drsmachado

Mitidiero:
Não sei se vcs se deram o trabalho de baixar o demo, mas lá contém um código PHP de exemplo, para vc utilizar o componente =)

Podem me corrigir se eu estiver enganado, mas creio que é isso que o autor do tópico quer.

O Código que liga com o banco de dados para trazer as opções, right?


Estou no trabalho, não tenho ambiente para PHP, nem me é permitido downloads aqui.

E sim, é o que ele quer.

Criado 20 de junho de 2012
Ultima resposta 20 de jun. de 2012
Respostas 8
Participantes 5