您的位置：首页 > 其它

Ajax实时搜索

2016-03-31 12:45 225 查看

演示一个实时的搜索，在您键入数据的同时即可得到搜索结果。

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

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

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AjaxLiveSearch</title>
<script type="text/javascript">
function showResult(str){

//如果输入框是空的（str.length==0），该函数会清空livesearch占位符的内容，并退出该函数
if(str.length == 0){
document.getElementById("livesearch").innerHTML = "";
document.getElementById("livesearch").style.border = "0px";
return;
}

//创建 XMLHttpRequest 对象
if(window.XMLHttpRequest){
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for 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";
}

}

//添加到 URL 末端的参数（q）（包含输入框的内容）
xmlhttp.open("GET","test.php?q="+str,true);

//向服务器上的文件发送请求
xmlhttp.send();

}
</script>
</head>

<body>

<form>
<p>在下面的文本框中搜索 JavaScript 的页面</p>
       <input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

php代码：

<?php
//加载 XML 文件到新的 XML DOM 对象
$xmlDoc = new DOMDocument();
$xmlDoc -> load('links.xml');

//获得xml文件的<link>
$x=$xmlDoc->getElementsByTagName('link');

//从链接上获得搜索文本
$q=$_GET["q"];

//如果搜索文本的长度大于0，则搜索xml文件的<link>
if (strlen($q)>0){
$hint="";

//遍历所有的 <title> 元素，以便找到匹配 JavaScript 所传文本
for($i=0; $i<($x->length); $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)){

//在 "$response" 变量中设置正确的 URL 和标题。
if ($hint==""){

$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else{

//如果找到多于一个匹配，所有的匹配都会添加到变量。
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}

//如果没有找到匹配，则把 $response 变量设置为 "no suggestion".
//如果找到匹配，则把 $response 变量设$hint.
if ($hint==""){
$response="no suggestion";
}else{
$response=$hint;
}

//输出搜索结果
echo $response;
?>

XML代码：

<?xml version="1.0" encoding="utf-8"?>
<pages>
<link>
<title
a994
>HTML a tag</title>
<url>http://www.w3schools.com/tags/tag_a.asp</url>
</link>

<link>
<title>HTML br tag</title>
<url>http://www.w3schools.com/tags/tag_br.asp</url>
</link>

<link>
<title>CSS background Property</title>
<url>http://www.w3schools.com/cssref/css3_pr_background.asp</url>
</link>

<link>
<title>CSS border Property</title>
<url>http://www.w3schools.com/cssref/pr_border.asp</url>
</link>

<link>
<title>JavaScript Date Object</title>
<url>http://www.w3schools.com/jsref/jsref_obj_date.asp</url>
</link>

<link>
<title>JavaScript Array Object</title>
<url>http://www.w3schools.com/jsref/jsref_obj_array.asp</url>
</link>

</pages>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航