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

Question

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

简而言之，这就是我正在努力从我的程序中摆脱出来的东西。我的程序创建“研究人员”，一旦系统捕获“研究人员”，“研究人员”现在就可以进行研究“提交”。因此，当捕获“提交”时，“研究人员”应该能够从下拉框中搜索他/她的姓名(如果需要，还可以搜索其他姓名)。由于会有很多名字，“研究员”还应该在下拉菜单旁边有一个搜索功能。

创建提交 View :

<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>

提交 Controller :

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