Asp.net mvc 3 使用mvc3 dropdownlist的jquery自动完成

我首先使用带有EF代码的ASP.NET MVC3。我以前没有使用过jQuery。我想向绑定到我的模型的dropdownlist添加自动完成功能。dropdownlist存储ID，并显示值

那么，如何连接jQueryUIAutoComplete小部件，在用户输入时显示值，但存储ID

我需要在一个视图中也有多个自动完成下拉列表

---

我看到了这个插件：但我不确定我是否想在我的项目中添加更多的“东西”。有没有办法用jQuery UI做到这一点？

更新

我刚刚发布了一个示例项目，在GitHub的一个文本框中展示了jQueryUI自动完成

---

我将它与常规MVC文本框一起使用，如

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

下面是我的Ajax调用的一个片段

它首先检查其内部缓存以查找要搜索的项，如果没有找到，它将向my controller发出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

部分，所以我可以用所选的值做一些事情我已经多次看到这个问题。你可以看到我的一些代码在

---

此外，此链接可能会有所帮助-

这是我在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
    });

});

---

很好

我使用jQueryUI小部件，它工作得非常棒，我使用ajax返回与用户输入的术语匹配的记录。这不仅仅是“开箱即用”，还需要向数据中添加自己的ajax调用，以获取RecordsHanks CD Smith。您是将其用于下拉列表还是仅用于文本框？看起来它工作得很好，我正在尝试把各个部分放在一起，以便更好地理解它。您可以推荐一些示例或文章吗？我刚刚更新了我的答案，并添加了一个指向示例项目的链接。这些链接是否有助于回答您的问题？@Ryan今天上午晚些时候，我将在GitHub上发布一个示例项目，并提供完整的工作解决方案，当你打算在你的站点上使用大量的自动完成时，它真的很简单，而且可以重复使用。缓存是如何填充的？@superartsy Good catch，我忘了那句话，只是从内存开始的。更新了答案，它位于ajax调用的

success

部分。如果您发布JSON结果控制器返回方法，它将对我们非常清楚和有用。谢谢