Axl*_*ack 15 javascript c# jquery jquery-ui autocomplete
我已经阅读了许多相同问题的帖子,但没有帮助,所以对重复的问题道歉:(我已经通过硬编码值和自动完成工作跟随JQueryUI网站上的简单示例,但我需要它来自我的数据库.
视图:
@Html.TextBoxFor(model => model.Position, new { @type = "text", @id = "jobtitle", @name = "jobtitle", @placeholder = "Job Title" })
Run Code Online (Sandbox Code Playgroud)
JS:
编辑:我添加了成功警报,并且正在调用警报,但没有数据(即没有数据从数据库中提取)
<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>
Run Code Online (Sandbox Code Playgroud)
我添加了所需的链接:
<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>
Run Code Online (Sandbox Code Playgroud)
下面是我的ActionResult(实际上是一个JsonResult)和函数来提取作业列表:
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);
}
Run Code Online (Sandbox Code Playgroud)
我错过了什么或做错了什么?
我感谢任何帮助,谢谢!
Axl*_*ack 13
我搞定了!
导致问题的第一件事是我需要在ActionResult上面添加[AllowAnonymous].
其次,我将Ajax调用改为:
$(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
});
});
Run Code Online (Sandbox Code Playgroud)
下面是我的ActionResult.我添加了一个可以解决区分大小写的更改:
[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);
}
Run Code Online (Sandbox Code Playgroud)