How can I create text box or drop down box using jquery autocomplete feature with database accessing.It is happening when you are pressing keys in that field.Then call to the database to get records.First you must access jquery-ui auto complete library files.
Here is a php front-end file.First include the jquery library file and jquery-ui.css,jquery-ui.min.js files.
JQuery autocomplete example with database accessing
This is the data.php file to get and send the records of the database.
$conn = mysql_connect("localhost", "root", "") or die(mysql_error()); mysql_select_db("demo_db", $conn) or die(mysql_error()); $q = strtolower($_GET["findword"]); $return = array(); $query = mysql_query("select language from languages where language like '%$q%'") or die(mysql_error()); while ($row = mysql_fetch_array($query)) { array_push($return,array('label'=>$row['language'],'value'=>$row['language'])); } echo(json_encode($return));
If you want to change auto complete styles change add the following stylesand change that as you want.
ul.ui-autocomplete { background: none repeat scroll 0 0 #DADADA; cursor: pointer; display: block; list-style-type: none; max-width: 200px; padding: 0; position: relative; z-index: 1; } ul.ui-autocomplete li.ui-menu-item { padding:3px 5px; } ul.ui-autocomplete li.ui-menu-item:hover, ul.ui-autocomplete li.ui-state-hover:hover{ background:#666; }
View Demo
Download JQuery autocomplete with database accessing Example (3 KB)