[英]How do I put data into a dropdown box and be able search for it by typing?
我正在努力将数据放入下拉框中。 数据不是预定义的数据集,因此它不像将数据硬编码到下拉框中那样简单。 数据已创建,一旦创建,我希望它在下拉框中填充。 目前,数据已通过复选框显示。 我也想拥有一个搜索功能,它将显示出智能感知。 例如,当我键入“ ALE”时,我希望它调出带有字母“ ALE”的数据,例如“ Alex”,“ Alexander”,“ Alexis”等。请理解我对MVC还是很陌生。
简而言之,这就是我要摆脱程序的努力。 我的程序创建“ Researcher”,一旦在系统上捕获了“ Researcher”,“ Researcher”现在就可以进行“提交”研究。 因此,当捕获到“提交”时,“研究者”应该能够从下拉框中搜索他/她的名字(如果需要,还可以使用其他名字)。 由于会有很多名称,因此“ Researcher”在下拉列表旁边还应该具有搜索功能。
创建提交视图:
<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");
}
您可以使用诸如Select2之类的第三方插件来实现可搜索的下拉列表https://select2.github.io/
您需要做的就是代替生成复选框,生成带有选项的选择,然后调用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
在阅读您的问题时,我不确定您是否首先遇到了无法生成下拉框的问题(但从第一句话看来,您就是这样)。 好吧,如果您正在寻求帮助,那么基本上您需要做的就是将您的viewModel
列表转换为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以用作数据源。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.