PHP og AJAX Live Search

AJAX kan tilbyde brugerne en mere venlig og interaktiv søgeoplevelse.

AJAX Live Search

I dette AJAX-eksempel viser vi en realtids-søgning.

En realtids-søgning har mange fordele sammenlignet med traditionel søgning:

  • Matchende resultater vises, når du indtaster data
  • Resultaterne filtreres, når du fortsætter med at indtaste data
  • Hvis der er for få resultater, kan du slette tegn for at få en bredere rækkevidde

Søg efter CodeW3C.com's sider i nedenstående tekstfelt

Dette eksempel inkluderer fire elementer:

  • En simpel HTML-formular
  • JavaScript
  • PHP-side
  • XML-dokument

I dette eksempel er resultaterne i en XML-dokument (links.xml) til at finde. For at gøre eksemplet lille og simpelt, giver vi kun 8 resultater.

HTML-formular

Dette er en HTML-side. Den indeholder en simpel HTML-formular, CSS-stil til formularen og et link til JavaScript:

<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)"
<div id="livesearch"></div>
</form>
</body>
</html>

Eksempel på forklaring - HTML-formular

Som du kan se, indeholder HTML-siden en simpel HTML-formular med et tekstfelt kaldet "txt1".

Sådan fungerer formularen:

  1. Når brugeren trykker på en tast i tekstfeltet og slipper, udløses der et event
  2. Når et event udløses, køres funktionen med navnet showResult()
  3. Under formularen er der et <div>-element kaldet "livesearch".

JavaScript

JavaScript-kode gemmes i "livesearch.js", som er forbundet med HTML-dokumentet:

var xmlHttp
function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 return
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browseren understøtter ikke HTTP-anmodning")
 return
 }
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("livesearch").
 innerHTML=xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border="1px solid #A5ACB2";
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Eksempel forklaring:

GetXmlHttpObject med PHP og AJAX anmodning har eksempler, der er ens.

Funktionen showResult()

Funktionen udføres hver gang et tegn indtastes i tekstfeltet.

Hvis der ikke er nogen input i tekstfeltet (str.length == 0), sætter funktionen returfeltet til tomt og fjerner eventuelle omgivende rammer.

Men hvis der er input i tekstfeltet, udfører funktionen:

  1. Definer url'en (filnavn) der sendes til serveren
  2. Tilføj parameteren (q) med indholdet af inputfeltet til url'en
  3. Tilføj et tilfældigt tal for at forhindre serveren i at bruge en cache-fil
  4. Kald funktionen GetXmlHttpObject for at oprette en XMLHTTP-objekt og informer denne funktion om at udføre en funktion kaldet stateChanged ved en ændring
  5. Brug den givne url til at åbne en XMLHTTP-objekt
  6. Send HTTP-anmodning til serveren

stateChanged() funktionen

Funktionen udføres hver gang XMLHTTP-objektets status ændres.

Når statussen bliver 4 (eller "complete") bruges respons teksten til at udfylde txtHint-pladsindholdet, og en kant sættes omkring tilbagevendende feltet.

PHP-side

Server-siden kaldet af JavaScript-koden er en PHP-fil med navnet "livesearch.php".

"livesearch.php"-koden tjekker den XML-dokument "links.xml". Denne dokument indeholder titler og URL'er for nogle af sidene på codew3c.com.

Disse kodene søger efter titler, der matcher søgestrengen i XML-filen, og returnerer resultaterne som HTML:

<?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
hvis (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 hvis ($y->item(0)->nodeType==1)
  {
  //find a link matching the search text
  hvis (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   hvis ($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 were found
//or to the correct values
if ($hint == "")
 {
 $response="no suggestion";
 }
else
 {
 $response=$hint;
 }
//Output the response
echo $response;
?>

Eksempel forklaring:

Hvis der sendes tekst fra JavaScript (strlen($q) > 0), sker der følgende:

  1. PHP opretter en XML DOM objekt til "links.xml" fil
  2. Gennemløb alle "title" elementer (nodetypes = 1) for at finde match til JavaScript sendte data name
  3. Find link med korrekt title og sæt det som "$response" variablen. Hvis der findes mere end én match, tilføjes alle matchende til variablen
  4. Hvis der ikke findes nogen match, sættes $response variablen til "no suggestion"
  5. $result er output sendt til "livesearch" placeholder