Ajax实时搜索

最新推荐文章于 2021-03-10 21:26:28 发布

烟囱土著

最新推荐文章于 2021-03-10 21:26:28 发布

阅读量432

点赞数

分类专栏：起步

起步专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

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

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

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" οnkeyup="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>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>

烟囱土著

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Ajax实时搜索

演示一个实时的搜索，在您键入数据的同时即可得到搜索结果。实时的搜索与传统的搜索相比，具有很多优势：当键入数据时，就会显示出匹配的结果当继续键入数据时，对结果进行过滤如果结果太少，删除字符就可以获得更宽的范围
复制链接

扫一扫