jquery - mvc - Autocompletar aplicando valor no etiquetado a cuadro de texto

jquery autocomplete ajax mvc 5

Question

Tengo problemas tratando de que la autocompletar funcione correctamente.

Todo se ve bien para mí, pero ...

<script>
$(function () {
$("#customer-search").autocomplete({
source: ''Customer/GetCustomerByName'',
minLength: 3,
select: function (event, ui) {
$("#customer-search").val(ui.item.label);
$("#selected-customer").val(ui.item.label);
}
});
});
</script>
<div>
<input id="customer-search" />
</div>
@Html.Hidden("selected-customer")

Sin embargo, cuando selecciono un elemento del menú desplegable, el valor se aplica al cuadro de texto en lugar de a la etiqueta.

¿Qué he hecho mal?

Si miro la fuente usando firebug puedo ver que mi campo oculto se está actualizando correctamente.

Answer 1

El comportamiento predeterminado del evento select es actualizar la input con ui.item.value . Este código se ejecuta después de su controlador de eventos.

Simplemente devuelva false o llame a event.preventDefault() para evitar que esto ocurra. También recomendaría hacer algo similar para el evento de focus para evitar que ui.item.value se coloque en la input mientras el usuario se desplaza sobre las opciones:

$("#customer-search").autocomplete({
/* snip */
select: function(event, ui) {
event.preventDefault();
$("#customer-search").val(ui.item.label);
$("#selected-customer").val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#customer-search").val(ui.item.label);
}
});

Ejemplo: http://jsfiddle.net/andrewwhitaker/LCv8L/

Answer 2

En mi caso, necesito registrar otro campo ''id'' en una entrada oculta. Así que agregué otro campo en los datos devueltos por una llamada ajax.

{label:"Name", value:"Value", id:"1"}

Y ha agregado un enlace ''crear nuevo'' en la parte inferior de la lista. Al hacer clic en ''Crear nuevo'', aparecerá un modal y podrá crear un nuevo elemento desde allí.

$(''#vendorName'').autocomplete
(
{
source: "/Vendors/Search",
minLength: 2,
response: function (event, ui)
{
ui.content.push
({
label: ''Add a new Name'',
value: ''Add a new Name''
});
},
select: function (event, ui)
{
$(''#vendorId'').val(ui.item.id);
},
open: function (event, ui)
{
var createNewVendor = function () {
alert("Create new");
}
$(".ui-autocomplete").find("a").last().attr(''data-toggle'', ''modal'').addClass(''highLight'');
$(".ui-autocomplete").find("a").last().attr(''href'', ''#modal-form'').addClass(''highLight'');
}
}
);

Creo que el punto es que puedes agregar cualquier campo de datos extra que no sea solo ''etiqueta'' y ''valor''.

Yo uso el modo de arranque y puede ser de la siguiente manera:

<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row">
</div>
</div>
</div>
</div>

Answer 3

Solo me gustaría agregar que en lugar de hacer referencia al elemento de entrada mediante "id" dentro de las funciones de selección y de devolución de llamada de foco , puede usar este selector, como:

$(this).val(ui.item.label);

es útil cuando asigna autocompletar para múltiples elementos, es decir, por clase:

$(".className").autocomplete({
...
focus: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
}
});