未触发 JQuery UI 自动完成器上的选择事件

Question

我正在尝试使用 jQuery UI，但我似乎无法弄清楚如何让选择事件执行。

我将自动完成器绑定如下：

$().ready(function () {
    $("#txtPersonSearch").autocomplete({
        source: '<%=Url.Action("GetPeople") %>',
        minLength: 3,
        select: function (event, ui) {
            // This code is never reached
            console.log(ui);
        }
    });
});

我是否缺少可以绑定到选择事件的东西？

Answer 1

也许您的控制器操作会引发异常。让我们采取以下行动：

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

注意事项：

• 可以使用 GET 动词 (JsonRequestBehavior.AllowGet) 访问控制器操作
• 控制器操作返回一个 JSON 数组，其中每个项目都有一个 id、label 和 value 属性
• 控制器操作不会引发异常

然后：

$(function () {
    $('#txtMovieSearch').autocomplete({
        source: '<%= Url.Action("GetPeople") %>',
        minLength: 3,
        select: function (evt, ui) {
            console.log(ui);
        }
    });
});

最后使用FireBug 来分析究竟是什么作为AJAX 请求发送到您的服务器以及来自服务器的响应。