如何将数据放入下拉框中并能够通过键入进行搜索？

Question

我正在努力将数据放入下拉框中。数据不是预先定义的数据集，因此它不像将数据硬编码到下拉框中那样简单。数据已创建，一旦创建，我希望它填充到下拉框中。目前数据由复选框显示。我还想要一个搜索功能，它会带来智能感知。例如，当我输入“ALE”时，我希望它显示带有字母“ALE”的数据，例如“Alex”、“Alexander”、“Alexis”等。请理解我对 MVC 很陌生.

简而言之，这就是我正在努力摆脱我的程序的原因。我的程序创建了“研究人员”，一旦系统上捕获了“研究人员”，“研究人员”现在可以进行研究“提交”。因此，当“提交”被捕获时，“研究人员”应该能够从下拉框中搜索他/她的姓名（以及其他姓名，如有必要）。由于名称会很多，因此“研究人员”也应该在下拉列表旁边具有搜索功能。

创建提交视图：

<div class="form-group">
            @Html.Label("Researchers", new { @class = "control-label col-md-2" })
            <div class="col-md-offset-2 col-md-10">
                        @{
                            int cnt = 0;
                            List<RMS.ViewModels.AssignedResearcherData> researchers = ViewBag.Researcher;

                            foreach (var researcher in researchers)
                            {
                                if (cnt++ % 3 == 0)
                                {
                                    @:</tr><tr>
                                }
                                @:<td>
                                    <input type="checkbox"
                                        name="selectedResearchers"
                                        value="@researcher.ResearcherID"
                                        @(Html.Raw(researcher.Assigned ? "checked=\"checked\"" : "")) />
                                        @researcher.FullName
                                @:</td>
                            }
                            @:</tr>
                        }
             </div>
        </div>

提交控制器：

private void PopulateAssignedResearcherData(Submission submission)
        {
            var allResearchers = db.Researcher;
            var submissionResearchers = new HashSet<int>(submission.Researcher.Select(i => i.ResearcherID));
            var viewModel = new List<AssignedResearcherData>();
            foreach (var researcher in allResearchers)
            {
                viewModel.Add(new AssignedResearcherData
                {
                    ResearcherID = researcher.ResearcherID,
                    FirstName = researcher.FirstName,
                    Surname = researcher.Surname,
                    Assigned = submissionResearchers.Contains(researcher.ResearcherID)
                });
            }
            ViewBag.Researcher = viewModel;
            // ViewBag.ResearcherSelect = new MultiSelectList(viewModel, "ResearcherID", "FullName");
        }

Answer 1

您可以使用Select2等第三方插件来实现下拉列表搜索 https://select2.github.io/

所有你需要做的不是生成复选框，而是生成带有选项的 Select 然后调用 select2：

//include library at top

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

// init select2
<script type="text/javascript">
  $('#myDDl').select2();
</script>



// generate select instead of checkbox   
<select id="myDDl" name="selectedResearchers" multiple="multiple">
 @foreach (var researcher in researchers)
 {
  <option value="@researcher.ResearcherID" 
       @(Html.Raw(researcher.Assigned ? "checked=\"checked\"" : ""))>
      @researcher.FullName
  </option>
}
</select>

请务必查看 select2 以了解您可以传入的更多选项 https://select2.github.io/examples.html

Answer 2

阅读您的问题后，我不确定您是否在生成下拉框时遇到了麻烦（但您的第一句话看起来像您）。好吧，如果您正在寻求帮助，那么基本上您需要做的就是将您的 viewModellist 转换为 C# 中的 MultipleSelectList，然后在 Razor 中生成下拉列表 -

C#

private void PopulateAssignedResearcherData(Submission submission)
    {
        var allResearchers = db.Researcher;
        var submissionResearchers = new HashSet<int>(submission.Researcher.Select(i => i.ResearcherID));
        var viewModel = new List<AssignedResearcherData>();
        foreach (var researcher in allResearchers)
        {
            viewModel.Add(new AssignedResearcherData
            {
                ResearcherID = researcher.ResearcherID,
                FirstName = researcher.FirstName,
                Surname = researcher.Surname,
                Fullname = researcher.FirstName + " " + researcher.Surname,
                Assigned = submissionResearchers.Contains(researcher.ResearcherID)
            });
        }
        ViewBag.Researcher = viewModel;
        ViewBag.ResearcherSelect = new MultiSelectList(viewModel, "ResearcherID", "FullName", viewModel.Where(rs => rs.Assigned);
    }

剃须刀

<div class="form-group">
        @Html.Label("Researchers", new { @class = "control-label col-md-2" })
        <div class="col-md-offset-2 col-md-10">
                    @{
                        int cnt = 0;
                        List<RMS.ViewModels.AssignedResearcherData> researchers = ViewBag.Researcher;

                        foreach (var researcher in researchers)
                        {
                            if (cnt++ % 3 == 0)
                            {
                                @:</tr><tr>
                            }
                            @:<td>
                                @Html.TextBox("researcherSearch")
                                @Html.DropDownList("researcherList", ViewBag.ResearcherSelect)
                            @:</td>
                        }
                        @:</tr>
                    }
         </div>
    </div>

完成后，使用其他答案之一或 jQuery UI 的自动完成 (http://jqueryui.com/autocomplete/) 中的建议添加搜索功能应该相对简单。

如果您确实采用 jQuery UI 路线，我建议您将 ViewBag.Researcher 变量转换为 JSON 以用作数据源。