javascript - ejemplo - JQuery UI Autocompletar no llega a ActionResult C#MVC

autocomplete jquery json

Question

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!

Answer 1

¡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);
}

Answer 2

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
});

});

Answer 3

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
};
}));
}