Ajax AutoSuggest AutoComplete in Php

Ajax AutoSuggest using php is really a simple task. I will first outlines the main steps involved in the process and then follow with the code:

• Whenever a keyup event on a textbox occur, a function in javascript is called which uses ajax to send the input in the textbox to the server
• The server receives the input and check for any matches in the database
• The matched result is sent back to the client side javascipt code, ajax, and then the result is shown in an absolute positioned div just under the input box.

This is how it will look like:

Now we move how will we make the script. It consists of following files along with their description in brief. These are the client side file:

• script.html - This is the main file in which there is input box and the result to be shown as shown in the image above
• ajax.js - This file holds the ajax code used to send and receive ajax requests to/from the server.
• tools.js - It contains some useful functions used in the script like trim(string) which is used to trim/remove leading and lagging spaces from a string.
• autosuggest.js - This contains the functions used to carry out the operations of ajax autosuggest. It contains code to get the input from the input box, send request via ajax and show the result received in the absolute positioned div.

Now on the server side, you can use any scripting language you want, but I have used php which is most widely used. These are the server side file:

• autosuggest.php - This files receices the request sent by the ajax from the autosuggest.js file. It searches the database for the possible matche(s) of the input and then send back the result to the autosuggest.js file.
• dbconfig.php - It holds the MySQL database settings, since this is the type of the database I have used.
• headers.php - Headers are sent to the browser to prevent it from caching the results and also the necessary header are sent to make the output in xml format.

You can also download all the files as zip from here:

http://rapidshare.com/files/184321469/ajax_autosuggest_using_php.zip

Create a new file ajax.js and copy the following code into it:

function getAjaxObject()
{
  // initially set the object to false
  var XMLHttpRequestObject = false;
  if (window.XMLHttpRequest)
  {
      // check for Safari, Mozilla, Opera...
	  XMLHttpRequestObject = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
      // check for Internet Explorer
	  XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (!XMLHttpRequestObject)
  {
	  alert("Your browser does not support Ajax.");
	  // return false in case of failure
	  return false;
  }
  // return the object in case of success
  return XMLHttpRequestObject;
}

function sendRequest(xmlHTTPObject, url, parameters, handleResponse, id)
{
   if(xmlHTTPObject)
   {
      // continue if the object is idle
      if (xmlHTTPObject.readyState == 4 || xmlHTTPObject.readyState == 0)
      {
		 // open connection and send "GET" request to server
		 xmlHTTPObject.open("POST", url, true);
		 // send the appropriate headers
		 xmlHTTPObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		 // set the function to be called on a change in ajaxObj state
		 xmlHTTPObject.onreadystatechange = function () {handleResponse(id)};
		 // set additional parameters (to be sent to server) to null
         xmlHTTPObject.send(parameters);
      }
   }
}

Then create a file tools.js and copy the following in it:

 // get element by ID
function getElemId(id)
{
	if (document && document.getElementById(id))
	{
	   return document.getElementById(id);
	}
	else
	{
	   alert("Invalid ID: " + id);
	   return false;
	}
} 

// function that will remove all spaces from a string used primarily to check
function trim(s)
{
   return s.replace(/(^\s+)|(\s+$)/g, "");
}

Now create a new file autosuggest.js and put the following code in it:

var ajaxObj = getAjaxObject();

var targetID = new Array() ;
var searchID = new Array() ;
var inputID = new Array() ;

function autoSuggest(id, targetid, searchid, inputid, e)
{

   var keyCode = getKeyCode(e, 'keyup');
   if (keyCode == 40 || keyCode == 38)
   {
	   return false;
   }

   autoSugPointer[id] = 0;

   targetID[id] = targetid;
   searchID[id] = searchid;
   inputID[id] = inputid;
   countSuggestions[id] = 0;

   var searchInput = getElemId(id).value;

   var url = "autosuggest.php";
   var params = "input=" + searchInput;

   if (trim(searchInput) !== "")
   {
	  sendRequest(ajaxObj, url, params, handleSuggestResponse, id);
   }
   else
   {
	  hideSuggestions();
   }
}

function handleSuggestResponse(id)
{
   if (ajaxObj.readyState == 4)
   {
      if (ajaxObj.status == 200)
      {
		  try
		  {
			  var XMLResponse = ajaxObj.responseXML.documentElement;
			  // work with the xml response
			  var keywordsTag = XMLResponse.getElementsByTagName('keywords');

			  var suggestions = new Array();

			  for (var i = 0; i < keywordsTag.length; i++)
			  {
				 var keywords = keywordsTag.item(i).firstChild.data.toString();
				 suggestions.push(keywords);
			  }
			  showSuggestions(suggestions, id);
		  }
		  catch(e)
		  {
			  hideSuggestions(id);
			  if (trim(ajaxObj.responseText) !== "")
			  alert(ajaxObj.responseText);
		  }
	  }
   }
}

var countSuggestions = new Array();

function showSuggestions(suggestions, id)
{
   var listWrapID = getElemId(targetID[id]);
   listWrapID.style.visibility = "visible";

   var listID = getElemId(searchID[id]);
   listID.innerHTML = "";

   for(var i = 0; i < suggestions.length; i++)
   {
     listID.innerHTML += "<li><a id='"+id + "-" +(i+1)+"' href=\"javascript:void(0);\" onclick=\"insertKeyword(this.innerHTML, '"+id+"');\">" + suggestions[i] + "</a></li>";
   }  

   countSuggestions[id] = i;

}

var autoSugPointer = new Array();

function keyBoardNav(e, id)
{

   var keyCode = getKeyCode(e, 'keydown');

   if (keyCode == 40)
   {
      if (autoSugPointer[id] >= 0 && autoSugPointer[id] < countSuggestions[id])
	  {
		 if (autoSugPointer[id] != 0 && autoSugPointer[id] != countSuggestions[id])
		 {
		    revertAutoSuggestKeyNav(autoSugPointer[id], id);
		 }
		 autoSugPointer[id] ++;
		 changeAutoSuggestKeyNav(autoSugPointer[id], id);
		 if (autoSugPointer[id] > 6)
		 {
			getElemId(searchID[id]).scrollTop = 30;
		 }
	  }
   }
   else if (keyCode == 38)
   {
	  if (autoSugPointer[id] > 1)
	  {
		 revertAutoSuggestKeyNav(autoSugPointer[id], id);
		 autoSugPointer[id] --;
		 changeAutoSuggestKeyNav(autoSugPointer[id], id);
		 if (autoSugPointer[id] <= 2)
		 {
			getElemId(searchID[id]).scrollTop = 0;
		 }
	  }
   }
   else if (keyCode == 13 && autoSugPointer[id])
   {
	  var str = getElemId(id + "-" + autoSugPointer[id]).innerHTML;
	  insertKeyword(str, id);
   }

}

function changeAutoSuggestKeyNav(id, ID)
{
   getElemId(ID + "-" + id).style.backgroundColor = "#555";
   getElemId(ID + "-" + id).style.color = "#FFF";
}

function revertAutoSuggestKeyNav(id, ID)
{
   getElemId(ID + "-" + id).style.backgroundColor = "#F9F9F9";
   getElemId(ID + "-" + id).style.color = "#006";
}

function hideSuggestions(id)
{
   try
   {
   var listWrapID = getElemId(targetID[id]);
   listWrapID.style.visibility = "hidden";
   }catch(e){}
}

function insertKeyword(str, id)
{
	hideSuggestions(id);
	getElemId(inputID[id]).value = str;
	getElemId(inputID[id]).focus();
}

Now let us move to the design, so copy these lines of code into the head section of the page in which you want the autosuggest.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax AutoSuggest Script</title>
<script type="text/javascript" language="javascript" src="ajax.js"></script>
<script type="text/javascript" language="javascript" src="tools.js"></script>
<script type="text/javascript" language="javascript" src="autosuggest.js"></script>
<script type="text/javascript" language="javascript">

</script>
<style type="text/css">
<!--
.searchList {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: absolute;
	width: 206px;
	height: 160px;
	overflow-y:auto;
	overflow:-moz-auto-vertical
}
.wrapSearch {
}
#input {
	width: 220px;
	padding: 2px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
}
html, body {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
}
.searchList li {
	display: block;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D6D6D6;
	width: 98%;
}
.searchList li a{
	display: block;
	color: #006;
	text-decoration: none;
	background-color: #F9F9F9;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 8px;
}
.searchList li a:hover{
	color: #FFF;
	background-color: #555;
}
.listWrap {
	visibility: hidden;
}
-->
</style>
</head>
<body>
<div class="wrapSearch">
  <div>
    <input name="input" type="text" id="input1" size="30" maxlength="1000" onkeyup="autoSuggest(this.id, 'listWrap1', 'searchList1', 'input1', event);" onkeydown="keyBoardNav(event, this.id);" />   <input type="submit" name="search" id="search1" value="Search" />
  </div>
  <div class="listWrap" id="listWrap1">
  <ul class="searchList" id="searchList1">
  </ul>
  </div>
</div>

<div class="wrapSearch" style="margin-top:250px">
  <div>
    <input name="input" type="text" id="input2" size="30" maxlength="1000" onkeyup="autoSuggest(this.id, 'listWrap2', 'searchList2', 'input2', event);" onkeydown="keyBoardNav(event, this.id);" />   <input type="submit" name="search" id="search2" value="Search" />
  </div>
  <div class="listWrap" id="listWrap2">
  <ul class="searchList" id="searchList2">
  </ul>
  </div>
</div>

</body>
</html>

The request from the ajax will be sent to this file, autosuggest.php, so create a new file autosuggest.php and copy these lines of code into it:

<?php
$limit = 10;
if (!isset($_POST['input']))
   exit;
$input = trim($_POST['input']);
require_once "dbconfig.php";
mysql_connect(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD) or die("Could not connect to host");
   mysql_select_db(DB_DATABASE) or die("Could not connect to database");
// Select the data from the mysql
// change below according to your own needs.
$sql = "SELECT `keywords` FROM `data` WHERE `keywords` LIKE '$input%' LIMIT $limit";
$result = mysql_query($sql);
if (!$result || !mysql_num_rows($result))
   exit;
include_once "headers.php"
echo "<response>"
while ($row = mysql_fetch_array($result))
   {
   $keywords = $row['keywords'];
   echo "<keywords>". $keywords ."</keywords>";
   }
echo "</response>";
?>

The autosuggest.php file fetches data from a table named ‘data’ and from the field ‘keywords’, you may need to change it to your own requirements in order to run the script. Otherwise you may get a syntax error in case the query does not execute.

Create a new file dbconfig.php which will hold the mysql connection settings:

<?php
   // database connection settings
   define("DB_HOSTNAME", "your_mysql_hostname");
   define("DB_USERNAME", "your_mysql_host_username");
   define("DB_PASSWORD", "your_mysql_username_password");
   define("DB_DATABASE", "your_mysql_database");
?>

Change the mysql connection settings to your own.

Finally create a file headers.php which will hold the headers to prevent the browser from caching the results and to send xml headers.

<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
   header("Cache-Control: no-cache");
   header("Pragma: no-cache");
   header("Content-type: text/xml");
?>

For your convenience, I have put all the files in a zip file for you to download free:

http://rapidshare.com/files/231051277/ajax-auto-suggest.zip

If you need any help, please comment on this post, I will definitely reply to relevant queries, thanks.