Select event on JQuery UI autocompleter is not fired - asp.net-mvc

Question

I am trying to use the jQuery UI, but I can't seem to figure out how to get the select event to execute.
I bind the autocompleter as following:
$().ready(function () {
$("#txtPersonSearch").autocomplete({
source: '<%=Url.Action("GetPeople") %>',
minLength: 3,
select: function (event, ui) {
// This code is never reached
console.log(ui);
}
});
});
Am I missing something to be able to bind to the select event?

Answer 1

Maybe your controller action throws an exception. Let's take the following action:
public ActionResult GetPeople(string term)
{
// the term parameter will contain the search string
// TODO: use the term parameter to filter the results from
// your repository. In this example the result is hardcoded
// to verify that the everything works.
return Json(new[]
{
new { id = "1", label = "label 1", value = "value 1" },
new { id = "2", label = "label 2", value = "value 2" },
new { id = "3", label = "label 3", value = "value 3" },
}, JsonRequestBehavior.AllowGet);
}
Things to watch out for:
The controller action is accessible with GET verb (JsonRequestBehavior.AllowGet)
The controller action returns a JSON array where each item has an id, label and value properties
The controller action doesn't throw an exception
And then:
$(function () {
$('#txtMovieSearch').autocomplete({
source: '<%= Url.Action("GetPeople") %>',
minLength: 3,
select: function (evt, ui) {
console.log(ui);
}
});
});
And finally use FireBug to analyze what exactly is sent to your server as an AJAX request and the response from the server.