PHP Ajax Live Search, Easy To Learn Ajax Live Search Tutorial in PHP

Ajax Live Search

We can create a simple live database search feature utilizing the AJAX and PHP, where the search results will be displayed as you start typing some character in search input box.

In this ajax tutorial we're going to create a live search box that will search the website (freetimelearning.com) links.

Live search has many benefits compared to traditional searching :

Results are shown as you type
Results narrow as you continue typing
If results become too narrow, remove characters to see a broader result

When a user types a character in the input field above, the function "showResult()" is executed. The function is triggered by the "onkeyup" event :

Ajax Live Search

ajax-live-search.php

<!DOCTYPE html>
<html>
<head>
	<title>PHP - AJAX Live Search</title>
</head>
<body>

<style type="text/css">
	.cus_form{ 
			padding:7px 15px; 
			border-radius:3px; 
			border:1px solid #0099da; 
			width:300px;
		}
	.live_search{
		text-decoration:none;
		font-size:16px;
		line-height:34px;
		font-weight:bold;
		padding:10px 5px;
		font-style:italic;
		}
	.live_search a{ 
		text-decoration:none; 
		color:#03F;
	}
	.live_search a:hover{ color:#F60;}
</style>

<script type="text/javascript">
function showResult(str) {
  if (str.length==0) { 
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #0099da";
    }
  }
  xmlhttp.open("GET","get_livesearch_data.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
    <input type="text" placeholder="Search Here" class="cus_form" onkeyup="showResult(this.value)">
    <div id="livesearch" class="live_search"></div>
</form>


</body>
</html>

The website Links XML file is "website_links.xml".

The page on the server called by the JavaScript above is a PHP file called "get_livesearch_data.php".

The source code in "get_livesearch_data.php" searches an XML file for titles matching the search string and returns the result :

get_livesearch_data.php

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

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

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
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) {
      //find a link matching the search text
      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>";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
  $response="No suggestion links";
} else {
  $response=$hint;
}

//output the response
echo $response;
?>

PHP Tutorial