博主也是闲来没事，暑假中学习的网页知识，在此和大家分享，写的如果不好，emmmm... 还请大家嘴下留情。
本篇文章展示的如何使用ajax技术，做一个简单的有查询功能的索搜框。
本篇文章展示的如何使用ajax技术，做一个简单的有查询功能的索搜框。
由于博主只是应用ajax技术，细节就不再啰嗦了（其实是博主现在还正在补充这部分知识，后期补充好了，还是会对本文章做详细的注释的。废话不多说看代码...
Search.html文件 (因为主要展示ajax效果，所以这里并没过意设计视图）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#submit:hover {font-weight: bold;}
#search_div ul{list-style-type: none;
margin-top: 5px;
padding: 0;
}
#search_div ul li a{text-decoration: none; color: black;}
</style>
<script type="text/javascript" src="ajax_request.js">
</script>
</head>
<body>
<div style="margin: auto; text-align: center;">
<h1>实时匹配搜索</h1>
<hr/>
<div id="search_div">
<input type="text" id="search" placeholder="Search"/>
<span id="submit"style="display: inline-block; padding: 3px;background: lightskyblue;color: white;cursor: pointer;">搜索</span>
<ul id="list">
</ul>
</div>
</div>
<script type="text/javascript" src="Search_action.js">
</script>
</body>
</html>
ajax_Request.js 文件 （服务器接收请求并作出响应）
var ajaxreq = false, ajaxCallback;
function ajaxRequest(filename){
if (window.XMLHttpRequest){
ajaxreq = new XMLHttpRequest();
}
else{
ajaxreq = new ActiveXObject("Microsoft.XMLHTTP");
}
ajaxreq.open("GET", filename);
ajaxreq.onreadystatechange = ajaxResponse;
ajaxreq.send(null);
}
function ajaxResponse(){
if(ajaxreq.readyState != 4){
return;
}
if(ajaxreq.status == 200){
if(ajaxCallback) ajaxCallback();
}else{
alert("Request failed: "+ajaxreq.statusText);
}
return true;
}
submit = document.getElementById("submit");
submit.onclick = StartSearch;
var t;
function StartSearch(){
if(t){
window.clearTimeout(t);
}
t = window.setTimeout("Search_ajaxRequest()", 200);
}
function Search_ajaxRequest(){
query = document.getElementById("search").value;
ajaxCallback = ShowResponseData;
ajaxRequest("Search_origin.php?query="+query);
}
function ShowResponseData(){
div = document.getElementById("search_div");
ul = document.getElementById("list");
div.removeChild(ul);
ul = document.createElement("ul");
ul.id = "list";
ul.style.listStyleType = "none";
ul.style.marginTop = "5px";
ul.style.padding = "0";
Key = ajaxreq.responseXML.getElementsByTagName("key");
Url = ajaxreq.responseXML.getElementsByTagName("url");
for(i = 0; i < Key.length; i++){
li = document.createElement("li");
li.style.borderBottom = "1px dashed #cdcdcd"
a = document.createElement("a");
a.style.color = "#000000";
a.style.textDecoration = "none";
a.setAttribute("href", Url[i].childNodes[0].nodeValue);
a.innerHTML = Key[i].childNodes[0].nodeValue;
li.appendChild(a);
ul.appendChild(li);
}
if(Key.length == 0){
li = document.createElement("li");
li.style.borderBottom = "1px dashed #cdcdcd"
li.appendChild(document.createTextNode("no find"));
ul.appendChild(li);
}
div.appendChild(ul);
}
Search_origin.php文件（数据源文件）
<?php
header("Content-type: text/xml");
if(!@isset($query)){
$query = @$_GET['query'];
}
//$query = "a";
$mysql = new mysqli("localhost", "root", "密码", "数据库名");
$sql = "select * from ajax_search";
if(!$result = $mysql->query($sql)){
die(mysqli_connect_error());
}
$data = array();
if($result->num_rows > 0){
$i = 0;
while($row = $result->fetch_assoc()){ //在数据库中查找匹配的字符并赋给data数组
if(preg_match('/[^\x00-\x80]/', $row['keyw'])){ //注：中文字符匹配
if(strpos($row['keyw'], $query) !== false){
$data['key'][$i] = $row['keyw'];
$data['url'][$i] = $row['href'];
$i++;
}
}
else if(stristr($row['keyw'], $query)){
$data['key'][$i] = $row['keyw'];
$data['url'][$i] = $row['href'];
$i++;
}
}
}
//print_r($data);die;
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
echo "<list>\n";
for($i = 0; $i < count($data['key']); $i++){
echo "<key>".$data['key'][$i]."</key>\n";
echo "<url>",$data['url'][$i]."</url>\n";
}
echo "</list>\n";
?>另外，由于数据是存储在MySQL数据库中，还需要建立数据库和相应的表
演示：
数据库搭配数据展示：
以上就完成了一个简单的匹配字符串查询的搜索框了。
