For this example there will be two files, autocomplete.php and search.php
CREATE TABLE users ( ID int, name varchar(255) );
Then when jQuery has been loaded add a trigger to the class auto adding autocomplete() I've set two options which are the source for the data in this case search.php and minLengh which determines how many letters must be used before a match is returned.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js "></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#name").autocomplete({
source:'search.php',
minLength:1
});
});
</script>
</head>
<body>
<form method="post" action="">
Name : <input type="text" id="name" name="name" />
</form>
</body>
</html>
search.php file contain DataBase connection details and sql query and return search details
<?php
mysql_connect("localhost","root"," ");
mysql_select_db("your db name");
$term=$_GET["term"];
$query=mysql_query("SELECT * FROM users where name like '%".$term."%'");
$json=array();
while($result=mysql_fetch_array($query)){
$json[]=array(
'value'=> $result["name"]
);
}
echo json_encode($json);
?>
No comments:
Post a Comment