PHP+AJAX教程(7):AJAX Live Search

作者佚名技术来源 NET编程浏览发布时间 2012-03-15

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

AJAX Live Search

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

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

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

在下面的文本框中搜索 W3School 的页面

本例包括四个元素：

简单的 HTML 表单
JavaScript
PHP 页面
XML 文档

在本例中，结果在一个 XML 文档 (links.xml) 中进行查找。为了让这个例子小而简单，我们只提供 8 个结果。

HTML 表单

这是 HTML 页面。它包含一个简单的 HTML 表单，针对此表单的 CSS 样式，以及指向 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>

例子解释 - HTML 表单

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

表单是这样工作的：

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

JavaScript

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

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 ("Browser does not support HTTP Request")
return
}
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.r

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: PHP+AJAX教程(6):AJAX responseXML实例下一篇: MySQL Explain命令用于查看执行效果

关于PHP+AJAX教程(7):AJAX Live Search的所有评论

随机推荐