asp.net core textbox autocomplete with jquery and json

Marius Vasile

I am trying to have a textbox with autocomplete using an example from here https://www.iaspnetcore.com/blog/blogpost/577e6e3784cd461ac830e4a9. However, I get no results. My code below

class="col-md-1">
"ConClass" class="form-control border-danger" asp-items="@Model.SelectControlClass">
"">-- Select --
for="RiskAssessmentSecondary.ConClass" class="text-danger">
for="RiskAssessmentSecondary.ConClass" id="conClass" />

class="col-md-2">

"txtControl" type="text" class="form-control" asp-for="RiskAssessmentSecondary.ConDetail" />

for

="RiskAssessmentSecondary.ConDetail" class="text-danger">

$(function () {
$("#ConClass").on("change", function () {
var data = $("#ConClass :selected").text();
$("#conClass").val(data);
$("#txtControl").autocomplete({
source: function (request, response) {
$.getJSON(`?handler=AutoComplete`, request, function (data) {
response($.map(data, function (item) {
return {
value: item + ""
}
}))
})
}
});
});
});

public JsonResult OnGetAutoComplete(string id)
{
var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
var orgid = _context.UsersData.Where(a => a.Id == userId).Select(a => a.OrgID).SingleOrDefault();
var conDetail = (from a in _context.HazardSources.Where(s => s.OrgID == orgid)
join b in _context.HazardClasses on a.IdHS equals b.IdHS into Temp1
from c in Temp1
join d in _context.HazardDetails on c.IdHC equals d.IdHC into Temp2
from e in Temp2
join f in _context.ControlClasses.Where(s => s.ConClass.ToLower().Contains(id.ToLower())) on e.IdH equals f.IdH into Temp3
from g in Temp3 select new
{
value = g.ConDetail
}).Distinct().ToList();
return new JsonResult(conDetail);
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
step 1. Give proper reference

css:
"stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
js, similar to above
for correct download visit https://code.jquery.com/ui/

step 2.
$.getJSON(`?handler=AutoComplete`, request, function (data) {
                          response($.map(data, function (item) {
                              return {
                                  value: item.value + ""
                              }
                          }))
                      })