Completamento automatico applicando valore non etichetta alla casella di testo

Ho problemi nel tentativo di far funzionare correttamente il completamento automatico.

Mi sembra tutto a posto ma ...

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

Tuttavia, quando seleziono un elemento dal menu a discesa, il valore viene applicato alla casella di testo anziché all'etichetta.

Cosa ho fatto di sbagliato?

Se guardo la fonte usando Firebug posso vedere che il mio campo nascosto viene aggiornato correttamente.

Il comportamento predefinito selectdell'evento è aggiornare il inputcon ui.item.value. Questo codice viene eseguito dopo il gestore di eventi.

Basta tornare falseo chiamare event.preventDefault()per evitare che ciò accada. Consiglierei anche di fare qualcosa di simile per l' focusevento per evitare che ui.item.valuevenga inserito nel inputmentre l'utente passa il mouse sulle scelte:

$("#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);
    }
});

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

Vorrei solo aggiungere che invece di fare riferimento all'elemento di input con "id" all'interno delle funzioni di callback di selezione e messa a fuoco puoi usare questo selettore, come:

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

è utile quando si assegna il completamento automatico a più elementi, ad esempio per classe:

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

Nel mio caso, ho bisogno di registrare un altro campo "id" in un input nascosto. Quindi aggiungo un altro campo nei dati restituiti dalla chiamata ajax.

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

E hanno aggiunto un collegamento "crea nuovo" in fondo all'elenco. Facendo clic su "crea nuovo", verrà visualizzato un modale da cui è possibile creare un nuovo elemento.

$('#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');
            }
        }
    );

Penso che il punto sia che puoi aggiungere qualsiasi campo dati extra oltre a "etichetta" e "valore".

Uso il bootstrap modal e può essere il seguente:

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