PHP Ajax
Auto Complete Search
Auto Complete
Search
The Auto complete search box provides the
suggestions when you enter data into the field. Here we are using xml to call
auto complete suggestions. The below example demonstrate, How to use auto
complete text box using with php.
Index page
Index page should be as follows −
<html>
<head>
<style>
div {
width:240px;
color:green;
}
</style>
<script>
function showResult(str) {
if (str.length == 0) {
document.getElementById("livesearch").innerHTML = "";
document.getElementById("livesearch").style.border =
"0px";
return;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else {
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>
<h2>Enter Course Name</h2>
<input type = "text" size
= "30" onkeyup = "showResult(this.value)">
<div id = "livesearch"></div>
<a href =
"http://www. example.com">More Details </a>
</form>
</body>
</html>
livesearch.php
It is used to call the data from xml file and it
will send the result to web browsers.
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("autocomplete.xml");
$x = $xmlDoc->getElementsByTagName('link');
$q = $_GET["q"];
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>";
}
}
}
}
}
if ($hint ==
"") {
$response = "Please enter a valid
name";
}else {
$response = $hint;
}
echo $response;
?>
autocomplete.xml
It contained auto complete data and accessed by livesearch.php based on tittle field and Url filed
<pages>
<link>
<title>android</title>
<url>http://www. example.com/android/index.htm</url>
</link>
<link>
<title>Java</title>
<url>http://www. example.com/java/index.htm</url>
</link>
<link>
<title>CSS
</title>
<url>http://www. example.com/css/index.htm</url>
</link>
<link>
<title>angularjs</title>
<url>http://www. example.com/angularjs/index.htm
</url>
</link>
<link>
<title>hadoop</title>
<url>http://www.example.com/hadoop/index.htm
</url>
</link>
<link>
<title>swift</title>
<url>http://www.example.com/swift/index.htm
</url>
</link>
<link>
<title>ruby</title>
<url>http://www.example.com/ruby/index.htm
</url>
</link>
<link>
<title>nodejs</title>
<url>http://www.example.com/nodejs/index.htm
</url>
</link>
</pages>
It will produce the following result −
Enter Course Name