Autocomplete using JQuery , PHP & Mysql

Autocomplete using JQuery , PHP & Mysql

Posted in : PHP Posted on : January 15, 2011 at 6:30 PM Comments : [ 0 ]

This section contains the detail about the Autocomplete using JQuery , PHP & Mysql.

Autocomplete using JQuery , PHP & Mysql

In this section, you will learn how to implement autocomplete using JQuery , PHP & Mysql.

Given below example will give you a clear idea :

Example :

In this example, we are using jQuery plug in "jquery.autocomplete.js" and for backend we are using PHP which also handle the database connectivity. given below the code :


<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />

<script type="text/javascript">
$().ready(function() {
$("#course").autocomplete("autoCompleteMain.php", {
width: 260,
matchContains: true,
//mustMatch: true,
//minChars: 0,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: false
<h2 id="banner">Autocomplete using jQuery, Ajax, PHP</h1>
<div id="content">
<form autocomplete="off">
Enter Language Name <label>:</label>
<input type="text" name="course" id="course" />
<input type="submit" value="Submit" />


$host=""; // Host name
$username="root"; // Mysql username
$password="root"; // Mysql password
$db_name="ankdb"; // Database name

$con = mysql_connect($host,$username,$password) or die(mysql_error());
mysql_select_db($db_name, $con) or die(mysql_error());

$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";

Output :

When you will start typing , a drop down list will show you the related topics :

Download Source Code

Go to Topic «PreviousHomeNext»

Your Comment:

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image

Tutorial Topics