javascript - ejemplo - JQuery UI Autocompletar no llega a ActionResult C#MVC
autocomplete jquery json (3)
He leído muchas publicaciones con el mismo problema, pero ninguna ayuda, así que me disculpo por la pregunta duplicada :( He seguido la simple muestra en el sitio de JQueryUI por los valores de codificación y los trabajos de autocompletado, pero necesito que venga de mi base de datos.
Ver:
@Html.TextBoxFor(model => model.Position, new { @type = "text", @id = "jobtitle", @name = "jobtitle", @placeholder = "Job Title" })
JS:
EDITAR : agregué una alerta en caso de éxito y se está llamando a la alerta, pero no hay datos (es decir, no se extrajeron datos de 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>
Y he agregado los enlaces requeridos:
<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>
A continuación se muestra mi ActionResult (En realidad, un JsonResult) y la función para obtener la lista de trabajos:
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);
}
¿Me estoy perdiendo algo o estoy haciendo algo mal?
Agradezco cualquier ayuda, gracias!
¡Lo tengo trabajando!
Lo primero que causaba un problema era que necesitaba agregar [AllowAnonymous] arriba de mi ActionResult.
En segundo lugar, cambié mi llamada de Ajax a esto:
$(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
});
});
A continuación está mi ActionResult. Agregué un cambio que resolvería la sensibilidad de mayúsculas y minúsculas:
[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);
}
Dont Change permite el cambio anónimo de tu llamada ajax así pasa tu parámetro en la cadena de consulta, esto afectará tu función back-end. Espero que esto te ayudará
$(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
});
});
No debe convertirlo en AllowAnonymous si no debe tener acceso público. Y en segundo lugar cambie su consulta para un mejor rendimiento:
var JobNames = (from N in ObjList
where N.Name.ToLower().StartsWith(Prefix.ToLower())
select N.Name);
Obviamente necesitas devolver una matriz de cadenas. Pero su código devuelve una matriz de objetos que tiene una sola propiedad de cadena.
Y cambie su código de secuencia de comandos según las actualizaciones:
success: function (data) {
response($.map(data, function (obj) {
return {
label: obj,
value: obj
};
}));
}