PHP 和 AJAX Live Search

AJAX 可为用户提供更友好、交互性更强的搜索体验。

AJAX Live Search

在下面的 AJAX 例子中，我们将演示一个实时的搜索。

实时的搜索与传统搜索相比，具有很多优势：

  • 当键入数据时，就会显示出匹配的结果
  • 当继续键入数据时，对结果进行过滤
  • 如果结果太少，删除字符就可以获得更宽的范围

HTML 表单

这是 HTML 页面。它包含一个简单的 HTML 表单，针对此表单的 CSS 样式，以及指向 JavaScript 的链接：

  1. <html>
  2. <head>
  3. <script src="livesearch.js"></script> 
  4. <style type="text/css"> 
  5. #livesearch
  6.   { 
  7.   margin:0px;
  8.   width:194px; 
  9.   }
  10. #txt1
  11.   { 
  12.   margin:0px;
  13.   } 
  14. </style>
  15. </head>
  16. <body>
  17.  
  18. <form>
  19. <input type="text" id="txt1" size="30"
  20. onkeyup="showResult(this.value)">
  21.  
  22. <div id="livesearch"></div>
  23. </form>
  24.  
  25. </body>
  26. </html>

例子解释 - HTML 表单

正如你看到的，HTML 页面包含一个简单的 HTML 表单，其中的文本框名为 "txt1"。

表单是这样工作的：

  • 当用户在文本框中按键并松开按键时，会触发一个事件
  • 当事件触发时，会执行名为 showResult() 的函数
  • 表单下面是名为 "livesearch" 的 <div> 元素。它用作 showResult() 所返回数据的占位符

JavaScript

JavaScript 代码存储在与 HTML 文档连接的 "livesearch.js" 中：

  1. var xmlHttp
  2.  
  3. function showResult(str)
  4. {
  5. if (str.length==0)
  6.  { 
  7.  document.getElementById("livesearch").
  8.  innerHTML="";
  9.  document.getElementById("livesearch").
  10.  style.border="0px";
  11.  return
  12.  }
  13.  
  14. xmlHttp=GetXmlHttpObject()
  15.  
  16. if (xmlHttp==null)
  17.  {
  18.  alert ("Browser does not support HTTP Request")
  19.  return
  20.  }
  21.  
  22. var url="livesearch.php"
  23. url=url+"?q="+str
  24. url=url+"&sid="+Math.random()
  25. xmlHttp.onreadystatechange=stateChanged 
  26. xmlHttp.open("GET",url,true)
  27. xmlHttp.send(null)
  28. } 
  29.  
  30. function stateChanged() 
  31. { 
  32. if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  33.  { 
  34.  document.getElementById("livesearch").
  35.  innerHTML=xmlHttp.responseText;
  36.  document.getElementById("livesearch").
  37.  style.border="1px solid #A5ACB2";
  38.  } 
  39. }
  40.  
  41. function GetXmlHttpObject()
  42. {
  43. var xmlHttp=null;
  44. try
  45.  {
  46.  // Firefox, Opera 8.0+, Safari
  47.  xmlHttp=new XMLHttpRequest();
  48.  }
  49. catch (e)
  50.  {
  51.  // Internet Explorer
  52.  try
  53.   {
  54.   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  55.   }
  56.  catch (e)
  57.   {
  58.   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  59.   }
  60.  }
  61. return xmlHttp;
  62. }

例子解释：

GetXmlHttpObject 与 PHP 和 AJAX 请求 中的例子相同。

showResult() 函数

该函数每当一个字符输入文本框就会执行一次。

如果文本域中没有输入 (str.length == 0)，该函数把返回字段设置为空，并删除周围的任何边框。

不过，如果文本域中存在输入，则函数执行：

  • 定义发送到服务器的 url （文件名）
  • 把带有输入框内容的参数 (q) 添加到 url
  • 添加一个随机数，以防止服务器使用缓存文件
  • 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在触发一个变化时告知此函数执行名为 stateChanged 的一个函数
  • 使用给定的 url 来打开 XMLHTTP 对象
  • 向服务器发送 HTTP 请求

stateChanged() 函数

每当 XMLHTTP 对象的状态发生变化时，该函数就会执行。

当状态变为 4 (或 "complete") 时，就会使用响应文本来填充 txtHint 占位符的内容，并在返回字段周围设置一个边框。

PHP 页面

由 JavaScript 代码调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的代码检查那个 XML 文档 "links.xml"。该文档上有一些页面的标题和 URL。

这些代码会搜索 XML 文件中匹配搜索字符串的标题，并以 HTML 返回结果：

  1. <?php
  2. $xmlDoc = new DOMDocument();
  3. $xmlDoc->load("links.xml");
  4.  
  5. $x=$xmlDoc->getElementsByTagName('link');
  6.  
  7. //get the q parameter from URL
  8. $q=$_GET["q"];
  9.  
  10. //lookup all links from the xml file if length of q>0
  11. if (strlen($q) > 0)
  12. {
  13. $hint="";
  14. for($i=0; $i<($x->length); $i++)
  15.  {
  16.  $y=$x->item($i)->getElementsByTagName('title');
  17.  $z=$x->item($i)->getElementsByTagName('url');
  18.  if ($y->item(0)->nodeType==1)
  19.   {
  20.   //find a link matching the search text
  21.   if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
  22.    {
  23.    if ($hint=="")
  24.     {
  25.     $hint="<a href='" . 
  26.     $z->item(0)->childNodes->item(0)->nodeValue . 
  27.     "' target='_blank'>" . 
  28.     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
  29.     }
  30.    else
  31.     {
  32.     $hint=$hint . "<br /><a href='" . 
  33.     $z->item(0)->childNodes->item(0)->nodeValue . 
  34.     "' target='_blank'>" . 
  35.     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
  36.     }
  37.    }
  38.   }
  39.  }
  40. }
  41.  
  42. // Set output to "no suggestion" if no hint were found
  43. // or to the correct values
  44. if ($hint == "")
  45.  {
  46.  $response="no suggestion";
  47.  }
  48. else
  49.  {
  50.  $response=$hint;
  51.  }
  52.  
  53. //output the response
  54. echo $response;
  55. ?>

例子解释：

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

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