Ajax Autocomplete – Jquery PHP Mysql

Before Start

The aim is to design an auto complete script for text box in ajax using Jquery, PHP, Mysql. I have searched for the script, and i have found a simple autocomplete plugin here http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ and you can find the documentation here http://docs.jquery.com/Plugins/Autocomplete.
You can download the source and see the Demos. But there is no demo fetching data from mysql. Then i have done some small trick in the php file to get data from mysql. This will be very useful in search suggestions, City, State fill up in some registrations.

HTML – Understanding the Layout

Here i have taken course names for example. I have a text box named and ided course. Thats all you need to know in the html layout.

<input type="text" name="course" id="course" />

JS – Include autocomplete plugin and activate

Download the autocomplete source from http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ and get the jquery core, autocomplete javascript file and css file. Include them inside the head tag. After that write some code to activate the text box with autocomplete.

<script type="text/javascript" src="jquery.js"></script>

<script type='text/javascript' src='jquery.autocomplete.js'></script>

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

<script type="text/javascript">

$().ready(function() {

$("#course").autocomplete("get_course_list.php", {

width: 260,

matchContains: true,

selectFirst: false

});

});

</script>

To know the autocomplete plugin options go to here http://docs.jquery.com/Plugins/Autocomplete/autocomplete and see the Options tab.

PHP – Get data from DB

Get the query word and search within the database and return the list. (get_course_list.php file mentioned in the above javascript)

<?php

require_once "config.php";

$q = strtolower($_GET["q"]);

if (!$q) return;

$sql = "select DISTINCT course_name as course_name from course where course_name LIKE '%$q%'";

$rsd = mysql_query($sql);

while($rs = mysql_fetch_array($rsd)) {

$cname = $rs['course_name'];

echo "$cname\n";

}

?>

Download

Download Source