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";
}
?>

Demo & Download

DEMO Here
Download Source

About these ads