Question

我需要在一个视图中的 ASP.NET MVC 中有一个DropDownList或等效的文件，其中填充了一堆来自数据库的条目。

选中后，DropDownList应像往常一样生成列表，但用户可以在其中输入文字，此时DropDownList中的项目将根据输入过滤文本。

但是，用户仍然只能选择列表中的一个选项。

它可以是任何其他控件，但最好不是第三方的东西。

Answer 1

通过编写一些jQuery代码是可能的。但它已经可用，它是开源的，广泛使用的

使用jQuery chosen并配置如下

 $(".select").chosen();

Answer 2

我发现了一种不错的方法。

唯一的问题是它需要2个单独的控件（DropDownList和TextBox），但除此之外，效果非常好。

HTML代码（控件声明）是：

<table>
    <tr>
        <td>
            <div>
                <%: Html.Label("Search Filter:")%>
            </div>
        </td>
        <td>
            <div>
                <%: Html.TextBox("textBoxForFilterInput")%>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <%: Html.Label("The List")%>
            </div>
        </td>
        <td>
            <div>
                <%: Html.DropDownList("listOfOptions")%>
            </div>
        </td>
    </tr>
</table>

JavaScript代码是：

    $(function () {
        var opts = $('#listOfOptions option').map(function () {
            return [[this.value, $(this).text()]];
        });

        $('#textBoxForFilterInput').keyup(function () {
            var rxp = new RegExp($('#textBoxForFilterInput').val(), 'i');
            var optlist = $('#listOfOptions').empty();
            opts.each(function () {
                if (rxp.test(this[1])) {
                    optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
                }
            });
        });
    });

然后只填充#listOfOptions然后你应该好好去。

或者，您可以将其连接到预定义的列表/数组，或者像我一样从数据库中获取它。

这就像一个魅力，非常简单和超快。

感谢DMI让我走上了正确的道路。

他的工作可以找到here。

Answer 3

为此，可以使用.autoComplete of Jquery。

HTML就像

<table><tr><td><input type="textbox" id="textBoxid" /> <div id="targetDiv" style="z-index:10"></div>

Jquery代码就像

 $(function () {
        $("#textBoxid").autocomplete({
            appendTo: "#targetDiv",
            position: { at: "bottom bottom" },
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("ActionMethod", "Controller")',
                    type: "POST",
                    dataType: "json",
                    data: { searchString: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.ColumnValue, Id:item.ColumnId }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                if (ui.item) {
 // for saving the selected item id or any other function you wanna perform on selection
                    $('#hiddenfield').val($.trim(ui.item.Id));
                }
            }
        });

行动方法就像

        [HttpPost]
        public JsonResult MaterialDesc(string searchString)
        {

//在searchString的基础上，您可以使用代码从数据库中获取数据。 }

希望它可以帮助你：）

带文本框输入的DropDownList作为过滤条件

3 个答案: