我试图恢复下拉列表值并为所选字段自定义搜索。客户端将只在下拉列表中的选定区域中搜索。我试图找到解决方案，但我找不到。谢谢你帮助
这是我的 Controller :
public JsonResult GetSearchValue(string search,int? gvt)
{
allsearch = db.Villes.Where(x => x.IdGouvernorat.CompareTo(gvt) == x.gouvernoratModels.IdGouvernorat.CompareTo(gvt)).Where(x => x.VilleName.Contains(search)).AsEnumerable().Select(x => new VilleModels { IdVille = x.IdVille, VilleName = x.VilleName }).ToList();
return new JsonResult { Data = allsearch, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
这是我的 cshtml:
@Html.DropDownListFor(m => m.VilleId1, Model.Gouvernorat, "Gouvernorat", new { @class = "btn btn-warning btn-block btn-lg dropdown-toggle",data_toggle="dropdown", @id = "dropdownlist", style = "width:100% !important" }) <div class="form-group has-success has-feedback" style="width:100%">
<input type="text" class="form-control" id="searchInput" placeholder="Entrez votre ville ou code postal" style="width:100%;max-width:100%;height: 45px;">
<i id="Icon" class="glyphicon glyphicon-ok form-control-feedback" style="color:#7dc24b;padding-top:5px"></i>
</div>
我的脚本:
<script>
$("#searchInput").autocomplete(
{
search: function () {
$(this).addClass('ui-autocomplete-loading');
$('#Icon').removeClass('glyphicon glyphicon-ok form-control-feedback');},
open: function () {
$(this).removeClass('ui-autocomplete-loading');
$('#Icon').addClass('glyphicon glyphicon-ok form-control-feedback');},
source: function (request, response) {
$.ajax({
url: '@Url.Action("GetSearchValue", "Home")',
datatype: "json",
data: {
gvt: document.getElementById('dropdownlist').selectedIndex(),
search: $("#searchInput").val()
},
success: function (data) {
if (data.length>0) {
response($.map(data, function (item) {
$(document).ready(function () {
$("#error").slideUp();
});
return { label: item.VilleName, value: item.VilleName };
}
)
);
}
if (data.length === 0) {
$(document).ready(function () {
$("#error").show();
});
}
},
error: function (xhr, status, error) {
alert("error");
}
});
}
});
</script>
最佳答案
这是我找到的答案，有两个错误，一个在 Controller 代码中，另一个在 Js 脚本中， Controller 代码:
public JsonResult GetSearchValue(string search,int? gvt)
{
List<VilleModels> allsearch = new List<VilleModels>();
allsearch = db.Villes.Where(x => x.VilleName.Contains(search)).AsEnumerable().ToList();
var localities = allsearch.Where(i=>i.IdGouvernorat == gvt).Select(x => new VilleModels { IdVille = x.IdVille, VilleName = x.VilleName }).ToList();
return new JsonResult { Data = localities, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
JavaScript 代码:
<script>
$("#searchInput").autocomplete(
{
search: function () {
$(this).addClass('ui-autocomplete-loading');
$('#Icon').removeClass('glyphicon glyphicon-ok form-control-feedback');},
open: function () {
$(this).removeClass('ui-autocomplete-loading');
$('#Icon').addClass('glyphicon glyphicon-ok form-control-feedback');},
source: function (request, response) {
$.ajax({
url: '@Url.Action("GetSearchValue", "Home")',
datatype: "json",
data: {
gvt: document.getElementById("dropdownlist").value,
search: $("#searchInput").val()
},
success: function (data) {
if (data.length>0) {
response($.map(data, function (item) {
$(document).ready(function () {
$("#error").slideUp();
});
return { label: item.VilleName, value: item.VilleName };
}
)
);
}
if (data.length === 0) {
$(document).ready(function () {
$("#error").show();
});
}
},
error: function (xhr, status, error) {
alert("error");
}
});
}
});
</script>
关于javascript - 在下拉列表中按选定区域限制搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46435377/