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";
}
?>
Using your script and working perfectly so far, with a few tweaks.
Have a question how can i get another varibale passed from (get_course_list.php to the index page, say course_id
thanks
Tariq
December 7, 2009
Thank you for getting this going with PHP!
How could I pass both the id field along with the rest so I may put it in a hidden filed ?
Johnny
December 9, 2009
Johnny,
Tariq,
Sorry for the late reply.
how to get name as well as id (in hidden field) – Please refer the next post.
beski
December 16, 2009
[...] on December 16, 2009. Filed under: 1 | In the previous post Ajax Autocomplete – Jquery PHP Mysql Johnny and Tariq asked how to get the id. With some changes we can store the value in a hidden [...]
Ajax Autocomplete – Part 2 – with name and value « Beschi's Works
December 16, 2009
very very very very thanks
somut
December 20, 2009
excellent thanks
prasath
December 30, 2009
this plugin is awesome but their is one problem when tried to delete item from list when i am used multiple:true then it not work
will you please tell their any configuration in autocomplete.js or any extra parameter i have to pass?
pls help me
Milind
January 20, 2010