AJAX实战_搜索框(匹配字符串查询)

来源：互联网发布：linux 定时器编辑：程序博客网时间：2024/06/05 09:28

博主也是闲来没事，暑假中学习的网页知识，在此和大家分享，写的如果不好，emmmm... 还请大家嘴下留情。
本篇文章展示的如何使用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;}

Search_action.js文件（向服务器发送请求，接收服务器响应发送的数据）

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文件（数据源文件）

<?phpheader("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数据库中，还需要建立数据库和相应的表

演示：

数据库搭配数据展示：

以上就完成了一个简单的匹配字符串查询的搜索框了。

阅读全文

0 0