Select event on JQuery UI autocompleter is not fired

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({
        so开发者_JS百科urce: '<%=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?

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.