Auto Complete a textbox using AJAX, PHP and MySQL

This example illustrates how to create a auto completion text box using AJAX, PHP and MySQL. Data is being retrieved from MySQL database and displayed using AJAX. As of now only mouse movements are being handled but keyboard events are not handled.

The example carries explanation of some parts of the code, while one can download the source,study and reuse as per your convenience. You can download the source from here.

1. index.html

<script language=”JavaScript” type=”text/javascript” src=”suggest.js”></script>
<input type=”text” id=”PoNumber” alt=”Search Criteria” onkeyup=”searchSuggest();” autocomplete=”off”/>
<div id=”layer1″></div>

The page loads the `suggest.js` file wherein the `searchSuggest` function is described. The keyboard event handler in this occasion is the `onkeyup` which checks for each letter that is being entered in the textbox. A div element is also created so that the data that has been passed by JavaScript can be handled.

2. suggest.js

var searchReq = getXmlHttpRequestObject();

This above line creates a httpRequest object for passing values.

function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById(‘PoNumber’).value);
searchReq.open(“GET”, ‘searchSuggest.php?search=’ + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}

`str` gets the value from the textbox. Each word entered in the text box is being passed to this variable which forms a part of the function. Later the values are passed on to the `searchSuggest.php` file which does all the processing.

var curLeft=0;
if (str1.offsetParent){
while (str1.offsetParent){
curLeft += str1.offsetLeft;
str1 = str1.offsetParent;
}
}

`curLeft` defines the current left position which is being initialize to 0 as the begining. `offsetparent` returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. `offsetParent` returns null when the element has style.display set to “none”. Since the element can be inside many hierarchies we loop along with each of them to get hold of the value.

ss.setAttribute(‘style’,’position:absolute;top:’+curTop+’;left:’+curLeft+’;width:150;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;’);

Here `ss` represents document id of the layer. In the above line the `style` property of the div tag is being set. The `position` should always be `absolute` else the layer will not be formed. The lower elements will be pushed down to accommodate the values that are being retrieved from the database. The `top`, `left` etc. are also being put to show to drop down (div layer). `overflow` is also set so for the scrolling effect in the div tag when it crosses the defined `height`.

The other stuff in the file should be self explanatory as it declares the variables and the functions.

3. database.php

function db_connect($server = ‘localhost’, $username = ‘root’, $password = ‘enigma’, $database = ‘suggest’, $link = ‘db_link’)

Please change the `server`, `username`, `password` and `database` name corresponding to yours.

4. searchSuggest.php
A self-explanatory file. This retrieves the data from the database and passes the output to the searchSuggest function in suggest.js.