PHP 实例 - AJAX 实时搜索
AJAX 可为用户提供更友好、交互性更强的搜索体验。
AJAX Live Search
在下面的实例中，我们将演示一个实时的搜索，在您键入数据的同时即可得到搜索结果。
实时的搜索与传统的搜索相比，具有很多优势：
当键入数据时，就会显示出匹配的结果
当继续键入数据时，对结果进行过滤
如果结果太少，删除字符就可以获得更宽的范围
在下面的文本框中输入 "HTML"，搜索包含 HTML 的页面：
上面实例中的结果在一个 XML 文件（links.xml）中进行查找。为了让这个例子小而简单，我们只提供 6 个结果。
实例解释 - HTML 页面
当用户在上面的输入框中键入字符时，会执行 "showResult()" 函数。该函数由 "onkeyup" 事件触发：
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 浏览器执行
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
源代码解释：
如果输入框是空的（str.length==0），该函数会清空 livesearch 占位符的内容，并退出该函数。
如果输入框不是空的，那么 showResult() 会执行以下步骤：
创建 XMLHttpRequest 对象
创建在服务器响应就绪时执行的函数
向服务器上的文件发送请求
请注意添加到 URL 末端的参数（q）（包含输入框的内容）
PHP 文件
上面这段通过 JavaScript 调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。
"livesearch.php" 中的源代码会搜索 XML 文件中匹配搜索字符串的标题，并返回结果：
load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
// 如果 q 参数存在则从 xml 文件中查找数据
if (strlen($q)>0)
{
$hint="";
for($i=0; $ilength); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
// 找到匹配搜索的链接
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "";
}
else
{
$hint=$hint . "
item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "";
}
}
}
}
}
// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
// 输出结果
echo $response;
?>
如果 JavaScript 发送了任何文本（即 strlen($q) > 0），则会发生：
加载 XML 文件到新的 XML DOM 对象
遍历所有的
元素，以便找到匹配 JavaScript 所传文本
在 "$response" 变量中设置正确的 URL 和标题。如果找到多于一个匹配，所有的匹配都会添加到变量。
如果没有找到匹配，则把 $response 变量设置为 "no suggestion"。
<p><br /> <script src="/upload/common/article_bottom1.js"></script></p>
<p class="info"><br />
<a href="/phpshili/">php 实例</a>
<a href="/php/">PHP</a>
<a href="/ajax/">AJAX</a>
</p>
</div>
<div class="card-footer clearfix">
<div class="opts">
<a title="对我有帮助" data-count="1024" data-state="deactive" data-type="article" data-id="1132" class="likeable deactive digg" href="#"><i class='icon fa fa-thumbs-up'></i> <span>1024 个赞</span></a>
<div class="pull-right">
<div class="dropdown">
<a href="#" data-bs-toggle ="dropdown">
<i class='icon fa fa-ellipsis-v'></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="/user/article/1132" target="_blank">编辑</a>
<a href="/user/jubao/1132" target="_blank">举报</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="replies" class="card" data-last-floor="7">
<div class="items card-body">
</div>
</div>
<div class="card">
<div class="card-body" style="padding: 10px;overflow: hidden;white-space: nowrap">
<script src="/upload/common/article_bottom2.js"></script>
</div>
</div>
<div class="card">
<div class="card-body">
<div id="reply" class="form box">
<div style="padding:20px;" data-turbolinks-action="replace">
需要 <a href="/user/login" class="btn btn-primary">登录</a> 后方可回复, 如果你还没有账号请 <a href="/user/reg">注册新账号</a>
</div>
</div>
</div>
</div>
<div class="topics topics-index card">
<div class="card-body item-list">
<div class="card-header">相关文章</div>
<div class="topic media topic-123" data-prefetch="/dingweiqi/123">
<div class="infos media-body">
<div class="title media-heading">
<a title="HTML 统一资源定位器(Uniform Resource Locators)" target="_blank" href="/dingweiqi/123">HTML 统一资源定位器(Uniform Resource Locators)</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/305">Camille</a>
<abbr class="timeago" title='2020-07-24'>2020-07-24</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/dingweiqi/123">884</a>
</div>
</div>
<div class="topic media topic-203" data-prefetch="/css/203">
<div class="infos media-body">
<div class="title media-heading">
<a title="CSS 表单" target="_blank" href="/css/203">CSS 表单</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/33">Vesta</a>
<abbr class="timeago" title='2020-06-09'>2020-06-09</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/css/203">702</a>
</div>
</div>
<div class="topic media topic-16088" data-prefetch="/fangfa/16088">
<div class="infos media-body">
<div class="title media-heading">
<a title="tomcat同时使用http和https访问的配置方法" target="_blank" href="/fangfa/16088">tomcat同时使用http和https访问的配置方法</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/874">Winema</a>
<abbr class="timeago" title='2020-01-06'>2020-01-06</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/fangfa/16088">947</a>
</div>
</div>
<div class="topic media topic-290011" data-prefetch="/history/195616568328060928">
<div class="infos media-body">
<div class="title media-heading">
<a title="history保存列表页ajax请求的状态使用示例详解" target="_blank" href="/history/195616568328060928">history保存列表页ajax请求的状态使用示例详解</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/517">Querida</a>
<abbr class="timeago" title='2022-12-15'>2022-12-15</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/history/195616568328060928">1922</a>
</div>
</div>
<div class="topic media topic-290161" data-prefetch="/fetch/197052684275023872">
<div class="avatar">
<a target="_blank" title="ajax、axios和fetch之间优缺点重点对比总结" href="/fetch/197052684275023872"><img class="media-object avatar-48" src="/upload/images/article/2022/12/de1030df9860996dfba4a477df80f948.jpg?x-oss-process=style/40x40" /></a>
</div>
<div class="infos media-body">
<div class="title media-heading">
<a title="ajax、axios和fetch之间优缺点重点对比总结" target="_blank" href="/fetch/197052684275023872">ajax、axios和fetch之间优缺点重点对比总结</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/517">Querida</a>
<abbr class="timeago" title='2022-12-23'>2022-12-23</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/fetch/197052684275023872">920</a>
</div>
</div>
<div class="topic media topic-290208" data-prefetch="/jiqiren/197413996947570688">
<div class="avatar">
<a target="_blank" title="利用Ajax实现智能回答的机器人示例代码" href="/jiqiren/197413996947570688"><img class="media-object avatar-48" src="/upload/images/article/2022/12/5cca923b179772ddbfc30b79537dea35.jpg?x-oss-process=style/40x40" /></a>
</div>
<div class="infos media-body">
<div class="title media-heading">
<a title="利用Ajax实现智能回答的机器人示例代码" target="_blank" href="/jiqiren/197413996947570688">利用Ajax实现智能回答的机器人示例代码</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/517">Querida</a>
<abbr class="timeago" title='2022-12-25'>2022-12-25</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/jiqiren/197413996947570688">1121</a>
</div>
</div>
<div class="topic media topic-290288" data-prefetch="/shili/198168692284981248">
<div class="infos media-body">
<div class="title media-heading">
<a title="实现像php一样方便的goORM数据库操作示例详解" target="_blank" href="/shili/198168692284981248">实现像php一样方便的goORM数据库操作示例详解</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/1">Ula</a>
<abbr class="timeago" title='2022-12-29'>2022-12-29</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/shili/198168692284981248">384</a>
</div>
</div>
<div class="topic media topic-290299" data-prefetch="/jiejuefangan/198168769296596992">
<div class="avatar">
<a target="_blank" title="AJAX的跨域问题解决方案" href="/jiejuefangan/198168769296596992"><img class="media-object avatar-48" src="/upload/images/article/2022/12/888a5b73131c173709ff33631d065640.jpg?x-oss-process=style/40x40" /></a>
</div>
<div class="infos media-body">
<div class="title media-heading">
<a title="AJAX的跨域问题解决方案" target="_blank" href="/jiejuefangan/198168769296596992">AJAX的跨域问题解决方案</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/192">Anna</a>
<abbr class="timeago" title='2022-12-29'>2022-12-29</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/jiejuefangan/198168769296596992">1603</a>
</div>
</div>
<div class="topic media topic-290318" data-prefetch="/caozuoxitong/198168992823640064">
<div class="avatar">
<a target="_blank" title="WAMP(win+apache+mysql+php)环境部署及优化(以win2008R2SP1为操作系统)" href="/caozuoxitong/198168992823640064"><img class="media-object avatar-48" src="/upload/images/article/2022/12/f02fff46dd85c488d90f9e711ab44df1.jpg?x-oss-process=style/40x40" /></a>
</div>
<div class="infos media-body">
<div class="title media-heading">
<a title="WAMP(win+apache+mysql+php)环境部署及优化(以win2008R2SP1为操作系统)" target="_blank" href="/caozuoxitong/198168992823640064">WAMP(win+apache+mysql+php)环境部署及优化(以win2008R2SP1为操作系统)</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/299">Danica</a>
<abbr class="timeago" title='2022-12-29'>2022-12-29</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/caozuoxitong/198168992823640064">387</a>
</div>
</div>
<div class="topic media topic-290702" data-prefetch="/nginx/201581930982932480">
<div class="avatar">
<a target="_blank" title="nginx降权与匹配php详细讲解" href="/nginx/201581930982932480"><img class="media-object avatar-48" src="/upload/images/article/2023/01/4601b3ac1a189f1b44d9a1ef2648f72a.jpg?x-oss-process=style/40x40" /></a>
</div>
<div class="infos media-body">
<div class="title media-heading">
<a title="nginx降权与匹配php详细讲解" target="_blank" href="/nginx/201581930982932480">nginx降权与匹配php详细讲解</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/210">Cybill</a>
<abbr class="timeago" title='2023-01-17'>2023-01-17</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/nginx/201581930982932480">7</a>
</div>
</div>
<div class="topic media topic-291244" data-prefetch="/http/206925158617710592">
<div class="infos media-body">
<div class="title media-heading">
<a title="详解PHP实现HTTP服务器过程" target="_blank" href="/http/206925158617710592">详解PHP实现HTTP服务器过程</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/682">Laila</a>
<abbr class="timeago" title='2023-02-16'>2023-02-16</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/http/206925158617710592">1441</a>
</div>
</div>
<div class="topic media topic-291249" data-prefetch="/apiwendang/206925192019050496">
<div class="infos media-body">
<div class="title media-heading">
<a title="PHP使用Swagger生成好看的API文档" target="_blank" href="/apiwendang/206925192019050496">PHP使用Swagger生成好看的API文档</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/817">Rhea</a>
<abbr class="timeago" title='2023-02-16'>2023-02-16</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/apiwendang/206925192019050496">629</a>
</div>
</div>
<div class="topic media topic-292081" data-prefetch="/docker/208761250098708480">
<div class="infos media-body">
<div class="title media-heading">
<a title="Docker部署nginx+php环境的全过程(简单可用!)" target="_blank" href="/docker/208761250098708480">Docker部署nginx+php环境的全过程(简单可用!)</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/194">Viridis</a>
<abbr class="timeago" title='2023-02-26'>2023-02-26</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/docker/208761250098708480">1763</a>
</div>
</div>
<div class="topic media topic-292292" data-prefetch="/jquery/208762550655909888">
<div class="infos media-body">
<div class="title media-heading">
<a title="Jquery使用原生AJAX方法请求数据" target="_blank" href="/jquery/208762550655909888">Jquery使用原生AJAX方法请求数据</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/364">Wanda</a>
<abbr class="timeago" title='2023-02-26'>2023-02-26</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/jquery/208762550655909888">1188</a>
</div>
</div>
<div class="topic media topic-293226" data-prefetch="/kuangjia/216543957555871744">
<div class="avatar">
<a target="_blank" title="PHP爬虫框架盘点" href="/kuangjia/216543957555871744"><img class="media-object avatar-48" src="/upload/images/article/2023/04/350b0cb54a9385b82f839584296e2dbb.jpg?x-oss-process=style/40x40" /></a>
</div>
<div class="infos media-body">
<div class="title media-heading">
<a title="PHP爬虫框架盘点" target="_blank" href="/kuangjia/216543957555871744">PHP爬虫框架盘点</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/592">Nora</a>
<abbr class="timeago" title='2023-04-10'>2023-04-10</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/kuangjia/216543957555871744">38</a>
</div>
</div>
<div class="topic media topic-295262" data-prefetch="/biaodan/233094216463417344">
<div class="infos media-body">
<div class="title media-heading">
<a title="Flask如何接收前端ajax传来的表单(包含文件)" target="_blank" href="/biaodan/233094216463417344">Flask如何接收前端ajax传来的表单(包含文件)</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/677">Serafina</a>
<abbr class="timeago" title='2023-07-10'>2023-07-10</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/biaodan/233094216463417344">614</a>
</div>
</div>
<div class="topic media topic-295452" data-prefetch="/jsonshuju/234850792717156352">
<div class="infos media-body">
<div class="title media-heading">
<a title="AJAX跨域请求获取JSON数据的实现方法" target="_blank" href="/jsonshuju/234850792717156352">AJAX跨域请求获取JSON数据的实现方法</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/308">Miette</a>
<abbr class="timeago" title='2023-07-20'>2023-07-20</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/jsonshuju/234850792717156352">522</a>
</div>
</div>
<div class="topic media topic-295454" data-prefetch="/jsonshuju/234850886432587776">
<div class="infos media-body">
<div class="title media-heading">
<a title="前后端ajax和json数据交换方式" target="_blank" href="/jsonshuju/234850886432587776">前后端ajax和json数据交换方式</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/963">Rhea</a>
<abbr class="timeago" title='2023-07-20'>2023-07-20</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/jsonshuju/234850886432587776">371</a>
</div>
</div>
<div class="topic media topic-295455" data-prefetch="/shili/234850925330563072">
<div class="infos media-body">
<div class="title media-heading">
<a title="前端ajax请求+后端java实现的下载zip压缩包功能示例" target="_blank" href="/shili/234850925330563072">前端ajax请求+后端java实现的下载zip压缩包功能示例</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/808">Malinda</a>
<abbr class="timeago" title='2023-07-20'>2023-07-20</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/shili/234850925330563072">1062</a>
</div>
</div>
<div class="topic media topic-295456" data-prefetch="/fengzhuang/234850963236585472">
<div class="infos media-body">
<div class="title media-heading">
<a title="关于Ajax的封装详解" target="_blank" href="/fengzhuang/234850963236585472">关于Ajax的封装详解</a>
</div>
<div class="info">
<a target="_blank" class="user-name" data-name="Rei" href="/user/813">Kathy</a>
<abbr class="timeago" title='2023-07-20'>2023-07-20</abbr>
</div>
</div>
<div class="count media-right">
<a class="state-false" href="/fengzhuang/234850963236585472">153</a>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar col-lg-3" id="sideright">
<div class="card">
<div class="card-body">
<a class="btn btn-primary btn-block" href="/user/tougao">我要提问</a>
</div>
</div>
<div class="card">
<script src="/upload/common/right.js"></script>
</div>
<div class="card">
<h3 class="card-header">致谢</h3>
<div class="card-body">
<p><b>帮助他人，成就自己。</b></p>
<p>人生最大成功就是伸出热情而温暖的双手，尽自己所能去帮助身边的每一个人，只要无私的奉献，就会收获到美好的生活。</p>
<p>1024问感谢每一位朋友的帮助和支持。</p>
软件开发网提供编程的基础软件技术培训教程,软件开发编程实例讲解Go,Node,HTML,CSS,Javascript,Python,Java,Ruby,C,PHP,MySQL等软件开发编程语言以及数据开发的基础知识，也提供大量的软件开发在线实例、从入门到精通就在1024问。
</div>
</div>
<div class="card">
<div class="card-body">
<div id="link">
<a href="https://www.pcbaby.cn/" target="_blank" >育儿网</a>
<a href="https://www.wys.net/" target="_blank" >微养生</a>
<a href="https://www.qqx.com/" target="_blank" >全球行</a>
<a href="https://www.msj.com/" target="_blank" >美食街</a>
<a href="http://www.baoerle.com/" target="_blank" >育儿</a>
<a href="https://www.3meishi.com/" target="_blank" >菜谱大全</a>
<a href="http://www.haihua365.com/" target="_blank" >海南旅游</a>
<a href="https://www.163lady.com/" target="_blank" >女性</a>
<a href="http://www.bubugou.com/" target="_blank" >养狗百科</a>
<a href="http://www.xingzuo8090.com/" target="_blank" >星座</a>
</div>
<script>
document.getElementById("l"+"i"+"n"+"k").style.display = "none";
</script>
<script src="/upload/common/right1.js"></script>
</div>
</div>
</div>
</div>
</div>
<footer class="footer" id="footer" data-turbolinks-permanent>
<div class="container">
<div class="media" data-turbolinks="false">
<div class="media-body">
<div class="copyright" style="margin-left: 15px">
© 2021 1024问 MIT <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备11031391号-29</a>
</div>
</div>
</div>
</div>
</footer>
<div class="zoom-overlay"></div>
<script src="/upload/static/js/tongji.js"></script>
<script>
document.getElementById("u"+"p"+"da"+"te").style.display = "none";
</script>
</body>
</html>