4

我正在使用带有 EF Code First 的 ASP.NET MVC3。我以前没有使用过 jQuery。我想将自动完成功能添加到绑定到我的模型的下拉列表中。下拉列表存储 ID，并显示值。

那么，如何连接 jQuery UI 自动完成小部件以在用户键入时显示值但存储 ID？

我也需要一个视图中的多个自动完成下拉菜单。

我看到了这个插件：http ://harvesthq.github.com/chosen/但我不确定我想在我的项目中添加更多“东西”。有没有办法用 jQuery UI 做到这一点？

4

3 回答 3

4

更新

我刚刚在 GitHub https://github.com/alfalfastrange/jQueryAutocompleteSample的文本框中发布了一个示例项目，展示了 jQueryUI 自动完成功能

我将它与常规 MVC TextBox 一起使用

@Html.TextBoxFor(model => model.MainBranch, new {id = "SearchField", @class = "ui-widget TextField_220" })

这是我的 Ajax 通话片段

它最初检查其内部缓存的正在搜索的项目，如果没有找到，它会触发对我的控制器操作的 Ajax 请求以检索匹配的记录

$("#SearchField").autocomplete({
    source: function (request, response) {
        var term = request.term;
        if (term in entityCache) {
            response(entityCache[term]);
            return;
        }
        if (entitiesXhr != null) {
            entitiesXhr.abort();
        }
        $.ajax({
            url: actionUrl,
            data: request,
            type: "GET",
            contentType: "application/json; charset=utf-8",
            timeout: 10000,
            dataType: "json",
            success: function (data) {
                entityCache[term] = term;
                response($.map(data, function (item) {
                    return { label: item.SchoolName, value: item.EntityName, id: item.EntityID, code: item.EntityCode };
                }));
            }
        });
    },
    minLength: 3,
    select: function (event, result) {
        var id = result.item.id;
        var code = result.item.code;
        getEntityXhr(id, code);
    }
});

这不是所有代码，但您应该能够在这里看到缓存是如何搜索的，然后进行 Ajax 调用，然后对响应做了什么。我有一个select部分，所以我可以对选定的值做一些事情

于 2012-05-23T21:33:06.650 回答
0

这就是我所做的FWIW。

$(document).ready(function () {
    $('#CustomerByName').autocomplete(
    {
        source: function (request, response) {
            $.ajax(
            {
                url: "/Cases/FindByName", type: "GET", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.CustomerName,
                            value: item.CustomerName,
                            id: item.CustomerID
                        }
                    })
                    );
                },

            });
        },
        select: function (event, ui) {
                    $('#CustomerID').val(ui.item.id);
                },
        minLength: 1
    });

});

效果很好！

于 2012-06-27T03:49:51.273 回答
-1

我已经多次看到这个问题。您可以看到我的一些代码在级联下拉列表中解决了这个问题，在发布后丢失了选择的项目

这个链接也可能有帮助 - http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx

于 2012-05-23T21:44:00.127 回答