Question

您好我想将自动完成应用于下拉列表。我会清楚地解释我的问题。我在下面提到了两个下拉列表。

这里我保持两个下拉选择模式。那就是我必须滚动并选择值。此方法适用于有限的值。但是该字段有超过1000个值意味着我很难通过滚动，搜索和选择值来找到该值。所以我决定将下拉值更改为自动完成下拉

我的观点

 @Html.Label("Customer Name", new { @class = "control-label" })
 @Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })

 @Html.Label("Contact Person", new { @class = "control-label" })
 @Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control", type = "text", id = "CustomerContactID" })

我的J-query

<script>
$(function () {
    $.ajax(
      '@Url.Action("GetCustomers", "VisitorsForm")',{
          type: "GET",
          datatype: "Json",
          success: function (data) {
              $.each(data, function (index, value) {
                  $('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');
              });
          }
      });
});

        $('#CustomerID').change(function () {
        $('#CustomerContactID').empty();
        $.ajax(
            '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm")',{
                type: "POST",
                datatype: "Json",
                data: { CustomerID: $('#CustomerID').val() },
                success: function (data) {
                $('#CustomerContactID').append($('<option></option>').val('').text('Please select'));
                $.each(data, function (index, value) {
                $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');
                  });

                }
            });
  });

实际上，我将这两个下降保持为级联下降。现在任何人都告诉我如何完成这项任务。请任何人给我这个问题的解决方案我搜索许多文章的任务，但很多任务只在那里只有文本框。所以任何人都给我解决方案。

提前谢谢。

Answer 1

您需要在下拉列表顶部添加一个文本框。每当在文本框中输入一些文本时，您可以根据关键向上和按键事件中的文本绑定下拉列表

如何将自动完成应用于MVC4中的下拉菜单？

1 个答案: