Practical Web Programming

Thursday, March 08, 2012

jQuery: How to Use jQuery UI Autocomplete

Earlier today I was migrating the jQuery Autocomplete plugin to jQuery UI Autocomplete and I was having a hard time making it work - the selection list was not displaying. I went to the jQuery UI site but could not find an example and not even a document showing how to handle the data from a dynamic script when using the "source" option. After some testing at home and a lot of hair pulling, I finally got it to display the list.

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);
?>


Recent Post