net ejemplo dropdownlist bootstrap asp javascript c# jquery jquery-ui autocomplete

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