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 :
autoComplete.php
<?php
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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
});
});
</script>
</head>
<body>
<h2 id="banner">Autocomplete using jQuery, Ajax, PHP</h1>
<div id="content">
<form autocomplete="off">
<p>
Enter Language Name <label>:</label>
<input type="text" name="course" id="course" />
</p>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
autoCompleteMain.php
<?php
$host="192.168.10.13"; // 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 :
[ 0 ] Comments