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>
<title>jQuery: How to Use jQuery UI Autocomplete</title>

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

source: function(request, response)
url: "data.php",
type: "POST",
dataType: "json",
term: request.term
success: function(data){
response( $.map( data, function(item)
return item;
minLength: 2

<input type="text" id="ac" />

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