Autocomplete Demo with HTML5, jQueryUI, PHP & mySQL
Below is the index.php script
Below is the source.php script
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Autocomplete Demo with HTML5, jQueryUI, PHP & mySQL</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
// Autocomplete will show after user type at least 1 character on input
$(function() {
$("#negara").autocomplete({
source: "Sourcedata.php",
minLength: 1,
});
});
</script>
</head>
<body>
<div class="autocomplete-form">
<label for="student">Enter Student : </label>
<input id="student"/>
</div>
</body>
</html>
Below is the source.php script
<?php
//connect to your database
mysql_connect("localhost","root","");
mysql_select_db("student");
// Using term variable to extract input from user
$term = trim(strip_tags($_GET['term']));
$query = " SELECT id, student_name
FROM student_info
WHERE student_name LIKE '".$term."%'
";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
$row['value']= htmlentities(stripslashes($row['student_name']));
$row['id']= (int)$row['id'];
// create an array to be converted to json
$row_set[] = $row;
}
//query will send back as json format
echo json_encode($row_set);
?>
Comments
Post a Comment