MVC ASP.Net 可输入的下拉列表

Question

我正在做一个项目，我需要一个下拉菜单，让用户可以在其中输入内容。

这是因为大约有 17000 条记录（公司名称），由于必须加载如此多的记录，页面需要几秒钟才能开始响应（TTFB）。

因此，一旦有人开始输入，我想用与该人输入的内容相匹配的记录填充下拉列表。

除了在下拉菜单中输入内容，我什么都知道。你们有人知道如何允许吗？

到目前为止我的代码：

查看：

<div class="form-group">
    @Html.LabelFor(model => model.CompanyRecId, "Company", new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("CompanyRecId", String.Empty)
        @Html.ValidationMessageFor(model => model.CompanyRecId)
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $("#CompanyRecId").change(function () {
            var text= $(this).text();
            var subItems = "";
            console.log("JSON activated");
            $.getJSON("@Url.Action("GetCompanyList", "Delivery")", {searchstring:text}, function (data) {
              $.each(data,function(index,item){
                subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>"
              });
              $("#CompanyRecId").html(subItems)
            });
        });
    });
</script>

控制器：

public ActionResult GetCompanyList(string SearchString)
    {
        SelectList CompanyList = new SelectList(db.Companies.Where(s => s.CompanyRecID != 0).Where(s => s.Company1.ToString().ToUpper().Contains(SearchString.ToUpper())).OrderBy(s => s.Company1), "CompanyRecID", "Company1");
        return Json(CompanyList, JsonRequestBehavior.AllowGet);
    }

Answer 1

你为什么要重新发明轮子？您可以为此使用 jQueryUI Autocomplete widget，或那里的许多自动完成小部件中的任何一个。

我对 jQueryUI 自动完成的唯一警告是我必须在隐藏字段中设置所选值（在 select 事件上），以便它与表单一起提交。当然，你得正确命名隐藏字段。

MVC ASP.Net 可输入的下拉列表

MVC ASP.Net Dropdown List that can be typed into

asp.net-mvc

drop-down-menu