Latest web development tutorials

Examples of real-time search PHP AJAX

AJAX can provide users with a more friendly, more interactive search experience.


AJAX Live Search

In the following examples, we will demonstrate a real-time search, you can get search results as you type data at the same time.

Real-time search with traditional search, compared with many advantages:

  • When you type data, it will show the result of a match
  • When continue typing data, filter results
  • If the result is too small, you can delete the character to get a wider range

Enter in the text box below "HTML", searches containing HTML page:

Examples of the above results in an XML file ( links.xml to find) in. To make this example small and simple, we only offer 6 results.


Examples explain - HTML page

When a user in the above input box character performs "showResult ()" function. This function consists of "onkeyup" Trigger Event:

<html>
<head>
<script>
function showResult(str)
{
	if (str.length==0)
	{ 
		document.getElementById("livesearch").innerHTML="";
		document.getElementById("livesearch").style.border="0px";
		return;
	}
	if (window.XMLHttpRequest)
	{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
		xmlhttp=new XMLHttpRequest();
	}
	else
	{// 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";
		}
	}
	xmlhttp.open("GET","livesearch.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

Source explained:

If the input box is empty (str.length == 0), this function will clear livesearch placeholder content, and exit the function.

If the input box is not empty, then showResult () performs the following steps:

  • Create XMLHttpRequest object
  • Create function when the server is ready to perform the response
  • File on the server to send requests
  • Please note that adding to (contains input box) the end of the URL parameter (q)

PHP File

The above servers through JavaScript calling this page is called "livesearch.php" PHP file.

"Livesearch.php" source code search XML files that match the search string title, and returns the result:

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

// 从 URL 中获取参数 q 的值
$q=$_GET["q"];

// 如果 q 参数存在则从 xml 文件中查找数据
if (strlen($q)>0)
{
	$hint="";
	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))
			{
				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>";
				}
			}
		}
	}
}

// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
	$response="no suggestion";
}
else
{
	$response=$hint;
}

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

If JavaScript to send any text (ie, strlen ($ q)> 0), occurs:

  • Load the XML file to the new XML DOM object
  • Through all <title> element in order to find matching text JavaScript preaching
  • Set the correct URL and title "$ response" variable. If it finds more than one match, all matches will be added to the variable.
  • If no match is found, put the $ response variable to "no suggestion".