Skip to content Skip to sidebar Skip to footer

JQuery autocomplete example with database accessing

Reading Time: < 1 minute

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)