Recent Posts

JQuery autocomplete example with database accessing

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)

What's your reaction?

Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0

Comments are closed.

Next Article:

0 %