使用MVC3下拉列表jQuery的自动完成(jquery autocomplete using mv

我使用ASP.NET MVC3与EF代码优先。我没有用jQuery工作过。我想自动完成功能添加到绑定到我的模型中的下拉列表。该下拉列表存储ID，并显示该值。

所以，我怎么连线了jQuery UI的自动完成小工具来显示值作为用户输入而存储ID？

我将需要多个自动完成的下拉列表，在一个视图了。

我看到这个插件： http://harvesthq.github.com/chosen/ ，但我不知道我要更多的“东西”添加到我的项目。有没有一种方法使用jQuery UI做到这一点？

Answer 1:

更新

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

我定期MVC文本框一样使用它

@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部分，所以我可以做一些与所选值

Answer 2:

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

});

伟大的作品！