See the code example below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery: How to Use jQuery UI Autocomplete</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#ac").autocomplete({
source: function(request, response)
{
$.ajax({
url: "data.php",
type: "POST",
dataType: "json",
data:{
term: request.term
},
success: function(data){
//alert(data);
response( $.map( data, function(item)
{
return item;
}));
}
});
},
minLength: 2
});
});
</script>
</head>
<body>
<input type="text" id="ac" />
</body>
</html>
The dynamic script that returns the data to be displayed in the selection list. NOTE: The data returned is just for this demo. In a real application, this is where you put your code to query the database based on what the user type.
// The text that the user type in the textbox.
$search_phrase = $_REQUEST["term"];
$arr = array();
$arr[] = "111";
$arr[] = "222";
$arr[] = "333";
echo json_encode($arr);
?>
0 comments:
Post a Comment