PHP och AJAX Live Search

AJAX kan erbjuda användarna en mer vänlig och interaktiv sökupplevelse.

AJAX Live Search

I detta AJAX-exempel kommer vi att demonstrera en realtids-sökning.

Realtime-sökning har många fördelar jämfört med traditionell sökning:

  • När du skriver in data visas matchande resultat
  • Resultaten filtreras när du fortsätter att skriva in data
  • Om det är för få resultat, kan du ta bort tecken för att få ett bredare område

Sök sidor på CodeW3C.com i följande textfält

Detta exempel inkluderar fyra element:

  • En enkel HTML-formulär
  • JavaScript
  • PHP-sida
  • XML-dokument

I detta exempel finns resultaten i en XML-dokument (links.xml) för att hitta. För att göra detta exempel enkelt och enkelt, erbjuder vi bara 8 resultat.

HTML-formulär

Detta är en HTML-sida. Den innehåller ett enkelt HTML-formulär, CSS-stilar för detta formulär och en länk till 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>

Exempel på förklaring - HTML-formulär

Som du ser innehåller HTML-sidan ett enkelt HTML-formulär med namnet "txt1" på textfältet.

Så fungerar formuläret:

  1. När användaren trycker på en tangent i textfältet och släpper den, utlöses ett händelse
  2. När ett händelseutlösande inträffar, körs funktionen showResult()
  3. Formuläret under innehåller en <div> med namnet "livesearch" som används som placeholder för data som returneras av showResult()

JavaScript

JavaScript-kod lagras i en "livesearch.js" som är kopplad till 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 ("Webbläsaren stöder inte HTTP-förfrågan")
 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;
}

例子解释：

GetXmlHttpObject och PHP och AJAX-forespurg har samma exempel.

Funktionen showResult()

Funktionen körs varje gång ett tecken matas in i textfältet.

Om det inte finns någon inmatning i textfältet (str.length == 0), sätter funktionen tillbaka returfältet till tomt och tar bort alla omgivande ramar.

Men om det finns inmatning i textfältet, utför funktionen:

  1. Definiera url som ska skickas till servern (filnamn)
  2. Lägg till parametern (q) som innehåller inmatningen i url
  3. Lägg till ett slumpmässigt nummer för att förhindra att servern använder en cachefil
  4. Använd funktionen GetXmlHttpObject för att skapa ett XMLHTTP-objekt och informera denna funktion att köra en funktion vid en förändring som kallas stateChanged
  5. Öppna XMLHTTP-objektet med given url
  6. Skicka HTTP-forespårgan till servern

stateChanged()-funktionen

Denna funktion körs varje gång XMLHTTP-objektets status ändras.

När statusen blir 4 (eller "complete") fylls innehållet i txtHint-placeholdern med responsen och en ram sätts runt återväxlingen.

PHP-sida

Servernsida som anropas av JavaScript-koden är PHP-filen med namnet "livesearch.php".

"livesearch.php"-koden kontrollerar den XML-dokument "links.xml" som innehåller titlar och URL:er för några sidor på codew3c.com.

Dessa koder söker efter titlar som matchar söksträngen i XML-filen och returnerar resultat i HTML:

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//hämta q-parametern från URL
$q=$_GET["q"];
//sök alla länkar från xml-filen om längden på q>0
om (strlen($q) > 0)
{
$hint="";
för($i=0; $i<($x->length); $i++)
 {
 $y=$x->item($i)->getElementsByTagName('title');
 $z=$x->item($i)->getElementsByTagName('url');
 om ($y->item(0)->nodeType==1)
  {
  //finna en länk som matchar söktexten
  om (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
   {
   om ($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;
?>

例子解释：

如果从 JavaScript 送来了任何文本 (strlen($q) > 0)，会发生：

  1. PHP 创建 "links.xml" 文件的一个 XML DOM 对象
  2. 遍历所有 "title" 元素 (nodetypes = 1)，以便找到匹配 JavaScript 所传数据的 name
  3. 找到包含正确 title 的 link，并设置为 "$response" 变量。如果找到多于一个匹配，所有的匹配都会添加到变量
  4. 如果没有找到匹配，则把 $response 变量设置为 "no suggestion"
  5. $result 是送往 "livesearch" 占位符的输出