PHP - AJAX Căutare live. Exemplu explicat - Pagina HTML. Funcția „showResult()”. Evenimentul "onkeyup". Explicația codului sursă. Creați un obiect XMLHttpRequest.

PHP - AJAX Căutare live

AJAX poate fi utilizat pentru a crea căutări mai prietenoase și interactive pentru utilizator.

AJAX Căutare live

Următorul exemplu va demonstra o căutare live, unde obțineți rezultate de căutare în timp ce tastați.

Căutarea live are multe avantaje în comparație cu căutarea tradițională:

Rezultatele sunt afișate pe măsură ce tastați
Rezultatele se restrâng pe măsură ce continuați să scrieți
Dacă rezultatele devin prea restrânse, eliminați caracterele pentru a vedea un rezultat mai larg

Rezultatele se găsesc într-un fișier XML (de ex. links.xml). Pentru a face acest exemplu mic și simplu, sunt disponibile doar șase rezultate.

Exemplu explicat - Pagina HTML

Când un utilizator tastează un caracter în câmpul de intrare (input field), funcția „showResult()” este executată. Funcția este declanșată de evenimentul "onkeyup":

<html>
<head>
<script>
function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // cod pentru IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // cod pentru IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  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ția codului sursă:

Dacă câmpul de intrare (input field) este gol (str.length == 0), funcția șterge conținutul marcatorului de căutare live (livesearch placeholder) și iese din funcție.

Dacă câmpul de intrare (input field) nu este gol, funcția showResult() execută următoarele:

Creați un obiect XMLHttpRequest

Creați funcția care trebuie executată atunci când răspunsul serverului este gata
Trimiteți cererea dezactivată unui fișier de pe server
Observați că la URL se adaugă un parametru (q) (cu conținutul câmpului de introducere (input field))