I have read many posts with the same issue, but none help, so apologies for the duplicate question :( Ive followed the simple sample on the JQueryUI site by hard coding values and the autocomplete works, but I need it to come from my Database.
View:
@Html.TextBoxFor(model => model.Position, new { @type = "text", @id = "jobtitle", @name = "jobtitle", @placeholder = "Job Title" }) JS:
EDIT: I added an alert on success, and the alert is being called, but there is no data(i.e. No data being pulled from DB)
<script> $(function () { $("#jobtitle").autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("JobsAutoFill", "Account")', data: { Prefix: request.term }, success: function (data) { alert(data); response(data); } }); }, minLength: 1 }); //$("#jobtitle").autocomplete({ // source: "/Account/JobsAutoFill/" //}); }); </script> And I have added the Links required :
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> Below is my ActionResult(Actually a JsonResult) & Function to pull the list of Jobs:
public List<Jobs> GetAllJobs() { List<Jobs> JobsList = new List<Jobs>(); using (RBotEntities EF = new RBotEntities()) { var JobsListQuery = (from ED in EF.EmploymentDetails select new { ED.pkiEmploymentDetailID, ED.Position }); foreach (var item in JobsListQuery) { JobsList.Add(new Jobs { Id = item.pkiEmploymentDetailID, Name = item.Position }); } } return JobsList; } public JsonResult JobsAutoFill(string Prefix) { //Note : you can bind same list from database List<Jobs> ObjList = new List<Jobs>(); ObjList = GetAllJobs(); //Searching records from list using LINQ query var JobNames = (from N in ObjList where N.Name.StartsWith(Prefix) select new { N.Name }); return Json(JobNames, JsonRequestBehavior.AllowGet); } Am I missing something or doing something wrong ?
I appreciate any help, thanks!
3 Answers
Answers 1
I got it working!
First thing that was causing an issue was that I needed to add [AllowAnonymous] above my ActionResult.
Secondly, I changed my Ajax call to this:
$(function () { $("#jobtitle").autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("JobsAutoFill", "Account")', data: { Prefix: request.term }, success: function (data) { response($.map(data, function (obj) { return { label: obj.Name, value: obj.Name }; })); } }); }, minLength: 1 }); }); Below is my ActionResult. I added a change that would sort out the case sensitivity:
[AllowAnonymous] public JsonResult JobsAutoFill(string Prefix) { //Note : you can bind same list from database List<Jobs> ObjList = new List<Jobs>(); ObjList = GetAllJobs(); //Searching records from list using LINQ query var JobNames = (from N in ObjList where N.Name.ToLower().StartsWith(Prefix.ToLower()) select new { N.Name }); return Json(JobNames, JsonRequestBehavior.AllowGet); } Answers 2
You shouldn't make it AllowAnonymous is it doesnt have to be have public access. And secondly change your query for better performance:
var JobNames = (from N in ObjList where N.Name.ToLower().StartsWith(Prefix.ToLower()) select N.Name); Obviously you need to return a string array. But your code is returning an object array which has a single string property.
And change your script code acccording to updates:
success: function (data) { response($.map(data, function (obj) { return { label: obj, value: obj }; })); } Answers 3
Dont Change allow to anonymous change your ajax call like that pass your parameter in query string this will hit your back end function. hope this will help you
$(function () { $("#jobtitle").autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("JobsAutoFill", "Account")?Prefix='+$("#jobtitle").val(), data: { Prefix: request.term }, success: function (data) { response($.map(data, function (obj) { return { label: obj.Name, value: obj.Name }; })); } }); }, minLength: 1 }); });
0 comments:
Post a Comment