Va rugam dezactivati programul ad block pentru a vizualiza pagina!

Cumpara abonament!
Plateste cu PayPal

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

Partajeaza in Google Classroom

Partajeaza cu Google Classroom
Susține Lectii-Virtuale!

Memorator: Descriere video Descarcă PDF

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))
Cumpara abonament
Plătește cu PayPal

Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.

Despre Lecții-Virtuale.ro

Lecții-Virtuale este o platformă educațională care oferă suport în vederea pregătirii pentru Evaluare Națională și Bacalaureat la Matematică, Fizică și Chimie. Lecțiile noastre sunt alcătuite din filme și exerciții și probleme cu tot cu rezolvări. Platforma noastră este o soluție ideală pentru școala online. Pentru facilitarea activității profesorilor în cadrul ecosistemului GSuite de la Google am implementat butonul Google Classroom. Scopul nostru este să ne concentrăm pe prezentarea noțiunilor și fenomenelor într-o manieră care să stimuleze înțelegerea și nu memorarea mecanică. Ne propunem să facilităm accesul la conținut educațional de calitate mai ales elevilor cu venituri mai modeste care nu își pemit meditații particulare. Sperăm să vă simțiti bine alături de noi și să invățați lucruri folositoare. Hai România!

Newsletter

Abonează-te la Newsletter pentru a fi la curent cu toate ofertele noastre.

Parteneri

EduApps partener Lectii Virtuale UiPath partener Lectii Virtuale Scoala365 partener Lectii Virtuale CCD Galați partener Lectii Virtuale

2024 © Lecții-virtuale.ro Toate drepturile rezervate
Termeni   Despre   Contact   Confidenţialitate   Cariere Parteneri