In this tutorial we are going to look how we can get the auto suggestions when people start typing on the text box. I’ve used jQuery AutoComplete and PHP to do that!
if you want to see the Demo or just want to Download, go to the bottom of the script!
Create a table in your database, just copy past the below code in phpMyadmin and run it. (If you have a table already then you can use that too!).
-- -- Table structure for table `category` -- CREATE TABLE IF NOT EXISTS `fd_main_category` ( `id` int(3) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; -- -- Dumping data for table `category` -- INSERT INTO `fd_main_category` (`id`, `name`) VALUES (1, 'Hair Style'), (2, 'Fashion Outfits'), (3, 'Fashion Accessories'), (4, 'Skin Care');
Then here is the PHP script to fetch the data from the table
suggesstions.php (backend)
<?php error_reporting(0);
$con = mysql_connect('localhost', 'root','');
$db = mysql_select_db('yourdatabase');
//where 'term' is the default keyword in jquery autocomplete api
$query = $_REQUEST['term'];
$sql = "select name from `fd_sub_category` where name like '%$query%'";
$query = mysql_query($sql);
while($row = mysql_fetch_assoc($query)){
$val[] = $row['name'];
}
//here we convert the result into JSON
echo json_encode($val);
?>
Do you know how small is the auto suggestion javascript?, look at here
<script>
$(document).ready(function(){
$( "#suggestionbox" ).autocomplete({
source: "suggestions.php"
});
})
</script>
Here is the entire front end script (index.html)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Auto Suggesstion Demo</title>
<!-- we need jquery library and jquery ui library and jquery css to run this sciprt-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#suggestionbox" ).autocomplete({
source: "suggestions.php"
});
})
</script>
</head>
<body>
<div class="ui-widget">
<label for="suggestionbox">Keyword: </label>
<input id="suggestionbox" />
</div>
</body>
</html>
Yes, as always you can download or demo the script here:
You rox man, rly…
I tried to make one myself but I could not handle keyboard events
yes thanks this post is really helfful
mandal aabhari aahe 🙂
Thanks it’s helpful
So simple and easy code. Very helpful
hi !
is it possible to integrate this in a GOOGLE FORM survey ?
I need each respondent of my survey to choose between eight thousand choices to identify them… SO i need an auto suggestion list, at any cost.
thanks!