I have been attempting to retrieve the value from a dropdown list and customize the search functionality specifically for the selected field. The client should only be able to search within the chosen zone in the dropdown. I have been searching for a solution without success. Thank you for any assistance you can provide.
https://i.sstatic.net/sed2C.png
This is my 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 };
}
This is my 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="Enter your city or postal code" 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>
My script :
<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>