ASP.NET MVC jquery autocompleta con valor y campo de texto

autocomplete mvc

Question

controlador

public ActionResult Search(string id)
{
id= Request.QueryString["term"];
var routeList = db.Movies.Where(r => r.Title.Contains(id))
.Take(5)
.Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
return Json(routeList, JsonRequestBehavior.AllowGet);
}

Ver:

<input type="hidden" id="MovieID" name="MovieID" />
<input type="text" id="SelectedMovie" value=""/>
<script type="text/javascript" language="javascript">
$("#SelectedMovie").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Transaction/Search", type: "POST", dataType: "json",
data: { id: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.label, value: item.id }; //updated code
}));
}
});
},
select: function (event, ui) {
$("#MovieID").val(ui.item.value);
$("#SelectedMovie").val(ui.item.label);
return false;
}
});
</script>

Tengo algún tipo de aplicación de videostore. Cuando voy a alquilar una película, necesito un cuadro combinado con películas que pueda seleccionar usando autocompletar. También es requisito que solo se guarde la ID (valor) en la base de datos y no el texto en sí.

EDIT: aquí está el ejemplo de trabajo completo

Answer 1

Dado que solo está pasando una cadena a la función Search() en el lado del servidor, los elementos de data que está pasando a través de la llamada $.ajax() deben cambiarse.

public ActionResult Search(string id)//I think that the id that you are passing here needs to be the search term. You may not have to change anything here, but you do in the $.ajax() call
{
id= Request.QueryString["term"];
var routeList = db.Movies.Where(r => r.Title.Contains(id))//this is a text filter no?
.Take(5)
.Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
return Json(routeList, JsonRequestBehavior.AllowGet);
}

$("#MovieID").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Transaction/Search", type: "POST", dataType: "json",
//original code
//data: { searchText: request.id, maxResults: 10 },
//updated code; updated to request.term
//and removed the maxResults since you are not using it on the server side
data: { id: request.term },
success: function (data) {
response($.map(data, function (item) {
//original code
//return { label: item.FullName, value: item.FullName, id: item.TagId };
//updated code
return { label: item.label, value: item.label, id: item.id };
}));
},
select: function (event, ui) {
//update the jQuery selector here to your target hidden field
$("input[type=hidden]").val(ui.item.id);
}
});
},
});

Déjame saber si esto funciona / ayuda!

Answer 2

Primero, debe usar el siguiente valor de retorno de su función:

return { label: item.title, value: item.id };

De acuerdo con la documentation , debe devolver los objetos con propiedades de label y value (sin propiedad de id ). La etiqueta es lo que ve el usuario, el valor es lo que se publica en el servidor.

En segundo lugar, pasa un searchText y maxResults en la llamada Ajax, por lo que su método de acción debe tener dos parámetros: public ActionResult Search(string searchText, int maxResults) .

¿Puedes aplicar estos cambios y ver si funciona?

Answer 3

Tu llamada .ajax() no se especifica en una id . no está en su objeto data{} , ni está en una querystring como parte del parámetro url (cualquiera de los dos enfoques funcionaría).

De ahí el valor nulo en tu método de acción.

De todos modos, inmediatamente sobrescribe el argumento de id del método con Request.QueryString["term"] . ¿Por qué hacer eso?

En lugar de solicitar a Request el ''término'' dentro del método, solo debes vincularlo al método Action como un parámetro en sí mismo como se muestra a continuación:

public ActionResult Search(string term)
{
var routeList = db.Movies.Where(r => r.Title.Contains(term))
.Take(5)
.Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
return Json(routeList, JsonRequestBehavior.AllowGet);
}