Autocompletar aplicando valor, no etiqueta al cuadro de texto

Tengo problemas para intentar que el autocompletado funcione correctamente.

Todo me parece bien, 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.

El comportamiento predeterminado del selectevento es actualizar inputcon ui.item.value. Este código se ejecuta después de su controlador de eventos.

Simplemente regrese falseo llame event.preventDefault()para evitar que esto ocurra. También recomendaría hacer algo similar para el focusevento para evitar que ui.item.valuese coloque en el inputcuando 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/

Solo me gustaría agregar que en lugar de hacer referencia al elemento de entrada por "id" dentro de las funciones de devolución de llamada de selección y enfoque , 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);
    }
});

En mi caso, necesito registrar otro campo 'id' en una entrada oculta. Entonces agrego otro campo en los datos devueltos por la llamada ajax.

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

Y agregué un enlace 'crear nuevo' al final 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 puede agregar cualquier campo de datos adicional que no sea solo 'etiqueta' y 'valor'.

Yo uso modal de arranque y puede ser el siguiente:

<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>