PHP 实例 - AJAX 实时搜索

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

AJAX Live Search

在下面的实例中，我们将演示一个实时的搜索，在您键入数据的同时即可得到搜索结果。

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

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

在下面的文本框中输入 "HTML"，搜索包含 HTML 的页面：

 

上面实例中的结果在一个 XML 文件（links.xml）中进行查找。为了让这个例子小而简单，我们只提供 6 个结果。

实例解释 - HTML 页面

当用户在上面的输入框中键入字符时，会执行 "showResult()" 函数。该函数由 "onkeyup" 事件触发：

  1. <html>
  2. <head>
  3. <script>
  4. function showResult(str)
  5. {
  6.     if (str.length==0)
  7.     {
  8.         document.getElementById("livesearch").innerHTML="";
  9.         document.getElementById("livesearch").style.border="0px";
  10.         return;
  11.     }
  12.     if (window.XMLHttpRequest)
  13.     {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
  14.         xmlhttp=new XMLHttpRequest();
  15.     }
  16.     else
  17.     {// IE6, IE5 浏览器执行
  18.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  19.     }
  20.     xmlhttp.onreadystatechange=function()
  21.     {
  22.         if (xmlhttp.readyState==4 && xmlhttp.status==200)
  23.         {
  24.             document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
  25.             document.getElementById("livesearch").style.border="1px solid #A5ACB2";
  26.         }
  27.     }
  28.     xmlhttp.open("GET","livesearch.php?q="+str,true);
  29.     xmlhttp.send();
  30. }
  31. </script>
  32. </head>
  33. <body>
  34.  
  35. <form>
  36. <input type="text" size="30" onkeyup="showResult(this.value)">
  37. <div id="livesearch"></div>
  38. </form>
  39.  
  40. </body>
  41. </html>

源代码解释：

如果输入框是空的（str.length==0），该函数会清空 livesearch 占位符的内容，并退出该函数。

如果输入框不是空的，那么 showResult() 会执行以下步骤：

  • 创建 XMLHttpRequest 对象
  • 创建在服务器响应就绪时执行的函数
  • 向服务器上的文件发送请求
  • 请注意添加到 URL 末端的参数（q）（包含输入框的内容）

PHP 文件

上面这段通过 JavaScript 调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的源代码会搜索 XML 文件中匹配搜索字符串的标题，并返回结果：

  1. <?php
  2. $xmlDoc=new DOMDocument();
  3. $xmlDoc->load("links.xml");
  4.  
  5. $x=$xmlDoc->getElementsByTagName('link');
  6.  
  7. // 从 URL 中获取参数 q 的值
  8. $q=$_GET["q"];
  9.  
  10. // 如果 q 参数存在则从 xml 文件中查找数据
  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.             // 找到匹配搜索的链接
  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. // 如果没找到则返回 "no suggestion"
  43. if ($hint=="")
  44. {
  45.     $response="no suggestion";
  46. }
  47. else
  48. {
  49.     $response=$hint;
  50. }
  51.  
  52. // 输出结果
  53. echo $response;
  54. ?>

如果 JavaScript 发送了任何文本（即 strlen($q) > 0），则会发生：

  • 加载 XML 文件到新的 XML DOM 对象
  • 遍历所有的 <title> 元素，以便找到匹配 JavaScript 所传文本
  • 在 "$response" 变量中设置正确的 URL 和标题。如果找到多于一个匹配，所有的匹配都会添加到变量。
  • 如果没有找到匹配，则把 $response 变量设置为 "no suggestion"。

PHP 实例 - AJAX 实时搜索-AJAX Live Search的更多相关文章

  1. PHP 实例 - AJAX 实时搜索

    AJAX Live Search 在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结果. 实时的搜索与传统的搜索相比,具有很多优势: 当键入数据时,就会显示出匹配的结果 当继续 ...

  2. 头部布局，搜索验证和AJAX自动搜索提示，并封装成组件，提高代码复用性

    index.html 头部区结构和样式 效果图 静态样式 index.html中的部分 <!-- 头部 --> <div class="header"> & ...

  3. 关于lucene的IndexSearcher单实例,对于索引的实时搜索

    Lucene版本:3.0 一般情况下,lucene的IndexSearcher都要写成单实例,因为每次创建IndexSearcher对象的时候,它都需要把索引文件加载进来,如果访问量比较大,而索引也比 ...

  4. 使用ajax实现搜索功能

      最近要做一个搜索功能,网上搜了一圈,终于做出来了,很简单的一个,这里分享我的方法,希望对大家有用,不足之处还请指教. 这里使用ajax提交数据,配合jquery将数据显示出来. 用jq的keyup ...

  5. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  6. JavaScript调用后台的三种方法实例(包含两种Ajax)

    方法一:直接使用<%=%>调用(ASPX页面) 前台JS,代码如下: <script type="text/javascript"> var methodS ...

  7. ajax实时获取下拉数据

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ajax ...

  8. web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例

    ()post http://04101334.iteye.com/blog/637695/ ()get function serializeElement(element) { var method ...

  9. Servlet+Ajax实现搜索智能提示

    一般在百度搜索框输入关键词时,会弹出一些相关信息提示,方便点选: 页面(search.jsp): <input type="text" name="keyWords ...

随机推荐

  1. bitbucket的简单使用

    1.如果你已经把项目建好的话,那么提交上去这样:没有构建本地仓库的话,那先打包本地,到你的项目路径上去后git initgit remote add origin https://linjiayu@b ...

  2. Isset、empty、count、is_null的比较

    1.empty判断变量是否为空, 先把变量转为布尔值再返回:对变量(字符串.数组等)赋值为一切为空的值.或者未定义的变量都返回true,即判断为空,比如null,' ',0,array(),false ...

  3. Netty 源码解析（四）: Netty 的 ChannelPipeline

    今天是猿灯塔“365篇原创计划”第四篇. 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty 源码解析(一): 开始 Netty 源码解析(二): Netty 的 Channel Netty ...

  4. Django---drf第一天

    目录 1 序列化组件介绍 2 简单使用 3 序列化类的字段类型 4 序列化字段选项 5 序列化组件修改数据 6 read_only和write_only 7查询所有 8 新增数据 9 删除一个数据 1 ...

  5. python入门007

    一.深浅copy 浅拷贝:是把原列表第一层的内存地址完全拷贝一份给新列表.即只能保证对原列表中第一层地址(不可变类型)的改操作不受影响,涉及到原列表中第二层地址(可变类型)的改操作时,原列表变,新列表 ...

  6. 【python接口自动化】01-requests请求

    requests是模拟HTTP.https请求接口. 一.HTTP协议介绍 1.1HTTP协议特点 1.2HTTP协议组成 请求方法 主要的请求方法有:GET.POST.DELETE .PUT .HE ...

  7. 通过源码学习@functools.lru_cache

    一.前言 通常在一些代码中包含了重复运算,而这些重复运算会大大增加代码运行所耗费的时间,比如使用递归实现斐波那契数列. 举个例子,当求 fibonacci(5) 时,需要求得 fibonacci(3) ...

  8. 谈谈你对 TCP 三次握手和四次挥手的理解

    TCP三次握手: 1.客户端发送syn包到服务器,等待服务器确认接收. 2.服务器确认接收syn包并确认客户的syn,并发送回来一个syn+ack的包给客户端. 3.客户端确认接收服务器的syn+ac ...

  9. spring-boot 应用 报错 No qualifying bean of type XXXXX.***Mapper

    报错类型 NoSuchBeanDefinitionException.No qualifying bean of type  XXXXX.***Mapper 报错信息详情 Caused by: org ...

  10. 深入浅出ReentrantLock源码解析

    ReentrantLock不但是可重入锁,而且还是公平或非公平锁,在工作中会经常使用到,将自己对这两种锁的理解记录下来,希望对大家有帮助. 前提条件 在理解ReentrantLock时需要具备一些基本 ...