PHP - 實現類似於百度的實時搜尋

XML檔案：

PHP服務端：

$xmlDoc=new DOMDocument();  //建立了一個 DOMDocument-Object例項

$xmlDoc->load("links.xml");  //載入

$link = $xmlDoc->getElementsByTagName('link');  //返回所有link節點的元素

$inputInfo = $_GET["inputInfo"]; // 從 URL 中獲取引數inputInfo的值

if (strlen($inputInfo)>0)

{   //從 xml 檔案中查詢資料

$hint="";

for($i=0; $i<($link->length); $i++)

{   //找到所有的title和url

$title = $link -> item($i) -> getElementsByTagName('title');

$url = $link -> item($i) -> getElementsByTagName('url');

if ($title -> item(0) -> nodeType == 1)   //可以理解為有這個元素

{   // 和輸入的值進行匹配

if (stristr($title -> item(0) -> childNodes -> item(0) -> nodeValue, $inputInfo))

{

if ($hint=="")  //為空

{

$hint="<a href='".$url -> item(0) -> childNodes -> item(0) -> nodeValue .
"' target='_blank'>".$title -> item(0) -> childNodes -> item(0) -> nodeValue ."</a>";

} else {

$hint=$hint . "<br/><a href='".
$url -> item(0) -> childNodes -> item(0) -> nodeValue."' target='_blank'>".
$link -> item(0) -> childNodes -> item(0) -> nodeValue ."</a>";

}}}}}

if ($hint==""){

echo "無結果";

}else{

echo $hint;

}

網頁端：（這裡只貼上js程式碼）

function showResult(str)

{

if (str.length==0)

{

document.getElementById("livesearch").innerHTML="";

document.getElementById("livesearch").style.border="0px";

return;

}

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200) //state : OK

{   //receive

document.getElementById("livesearch").innerHTML=xmlhttp.responseText;

document.getElementById("livesearch").style.border="1px solid #A5ACB2";

}

}

xmlhttp.open("GET","livesearch.php?inputInfo="+str,true);  //send

xmlhttp.send();

}

<form>

<input type="text" size="30" onkeyup="showResult(this.value)">

<div id="livesearch"></div>

</form>

OK！現在就可以愉快的玩耍了！