使用MVC3的DropDownList jquery的自动完成 [英] jquery autocomplete using mvc3 dropdownlist

问题描述

我使用ASP.NET MVC3使用EF code首先。我没有用jQuery工作previously。我想自动完成功能添加到绑定到我的模型一个DropDownList。 DropDownList的存储ID，并显示该值。

I am using ASP.NET MVC3 with EF Code First. I have not worked previously with jQuery. I would like to add autocomplete capability to a dropdownlist that is bound to my model. The dropdownlist stores the ID, and displays the value.

那么，如何布线了jQuery UI的自动完成控件显示为用户键入的价值，但存储ID？

So, how do I wire up the jQuery UI auto complete widget to display the value as the user is typing but store the ID?

我需要在一个视图中过多个自动完成的下拉列表中。

I will need multiple auto complete dropdowns in one view too.

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

I saw this plugin: http://harvesthq.github.com/chosen/ but I am not sure I want to add more "stuff" to my project. Is there a way to do this with jQuery UI?

推荐答案

这是我做过什么FWIW。

This is what I did 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
    });

});

伟大工程！

这篇关于使用MVC3的DropDownList jquery的自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！