AJAX combat _ search box (matching the query string)

Bloggers also got nothing to do, web knowledge learned in the summer, here and share with you, if written well, emmmm ... but please mouth mercy.
This article shows how to use ajax technology, have to do a simple search query capabilities of the cable box.

Because bloggers just use ajax technology, details on further ado (in fact, bloggers are now also supplement this part of the knowledge, the latter supplemented Well, this article will still make detailed comments. Ado look at the code .. .

Search.html file (because the main display ajax effect, so had no meaning here Design View)

<!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 file (server receives the request and respond to)

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 file (send a request to the server, the server receives the response data transmitted)

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 files (data source)

<?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";
?>

Further, since the data is stored in a MySQL database, the database and also need to establish the corresponding table

Demo:

Database with data showing:

The search box above to complete a simple string matching the query.

Micoud _01

Published 31 original articles · won praise 3 · views 10000 +

Private letter concerns

AJAX combat _ search box (matching the query string)

Guess you like