Shefarol Soluções Web

AJAX ao vivo - Voltar

AJAX pode ser usado para criar pesquisas mais amigáveis e interativas.

Pesquisa ao vivo AJAX

O exemplo a seguir demonstrará uma pesquisa ao vivo, na qual você obtém os resultados da pesquisa enquanto digita.

A pesquisa ao vivo tem muitos benefícios em comparação com a pesquisa tradicional:

Procure uma página W3School no campo de entrada abaixo:

Dicas para pesquisa: tag - property - object

Os resultados do exemplo acima são encontrados em um arquivo XML ( links.xml ). Para tornar este exemplo pequeno e simples, apenas seis resultados estão disponíveis.

Referência: https://www.w3schools.com/php/php_ajax_livesearch.asp
Exemplo Explicado - A Página HTML

Quando um usuário digita um caractere no campo de entrada acima, a função "showResult()" é executada. A função é acionada pelo evento "onkeyup":

Código em HTML
<html>
<head>
	<script>
		function showResult(str) {
		  if (str.length==0) {
		    document.getElementById("livesearch").innerHTML="";
		    document.getElementById("livesearch").style.border="0px";
		    return;
		  }
		  var xmlhttp=new XMLHttpRequest();
		  xmlhttp.onreadystatechange=function() {
		    if (this.readyState==4 && this.status==200) {
		      document.getElementById("livesearch").innerHTML=this.responseText;
		      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
		    }
		  }
		  xmlhttp.open("GET","livesearch.php?q="+str,true);
		  xmlhttp.send();
		}
	</script>
</head>
<body>
	<form>
		<input type="text" size="30" onkeyup="showResult(this.value)">
		<div id="livesearch"></div>
	</form>
</body>
</html>

Explicação do código-fonte:

Se o campo de entrada estiver vazio (str.length==0), a função limpa o conteúdo do espaço reservado de pesquisa ao vivo e sai da função.

Se o campo de entrada não estiver vazio, a função showResult() executa o seguinte:

O Arquivo PHP

A página no servidor chamada pelo JavaScript acima é um arquivo PHP chamado "livesearch.php".

O código-fonte em "livesearch.php" pesquisa um arquivo XML em busca de títulos que correspondam à string de pesquisa e retorna o resultado:

Código em PHP
<?php
	$xmlDoc=new DOMDocument();
	$xmlDoc->load("links.xml");

	$x=$xmlDoc->getElementsByTagName('link');

	//get the q parameter from URL
	$q=$_GET["q"];

	//lookup all links from the xml file if length of q>0
	if (strlen($q)>0) {
	  $hint="";
	  for($i=0; $i<($x->length); $i++) {
	    $y=$x->item($i)->getElementsByTagName('title');
	    $z=$x->item($i)->getElementsByTagName('url');
	    if ($y->item(0)->nodeType==1) {
	      //find a link matching the search text
	      if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
	        if ($hint=="") {
	          $hint="<a href='" .
	          $z->item(0)->childNodes->item(0)->nodeValue .
	          "' target='_blank'>" .
	          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
	        } else {
	          $hint=$hint . "<br /><a href='" .
	          $z->item(0)->childNodes->item(0)->nodeValue .
	          "' target='_blank'>" .
	          $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
	        }
	      }
	    }
	  }
	}

	// Set output to "no suggestion" if no hint was found
	// or to the correct values
	if ($hint=="") {
	  $response="no suggestion";
	} else {
	  $response=$hint;
	}

	//output the response
	echo $response;
?>

 

Explicação:

Se houver algum texto enviado do JavaScript (strlen($q) > 0), acontece o seguinte: