Question

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

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

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

我错过了能够绑定到select事件的东西吗？

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请求发送到服务器的确切内容以及服务器的响应。

在JQuery UI上选择事件不会触发自动完成

1 个答案: