La saisie semi-automatique appliquant une valeur et non une étiquette à une zone de texte

Question

J'ai du mal à faire en sorte que l'auto-complétion fonctionne correctement.

Tout me semble correct mais ...

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

Toutefois, lorsque je sélectionne un élément dans la liste déroulante, la valeur est appliquée à la zone de texte au lieu de l'étiquette.

Qu'est ce que j'ai mal fait?

Si je regarde la source en utilisant firebug, je peux voir que mon champ caché est mis à jour correctement.

Answer 1

Le comportement par défaut de l' select événement est de mettre à jour l' input avec ui.item.value. Ce code s'exécute après votre gestionnaire d'événement.

Il suffit de retourner false ou appelez - event.preventDefault() afin d'éviter ce problème. Je vous recommande aussi de faire quelque chose de similaire pour l' focus événement pour prévenir ui.item.value d'être placé dans la input que l'utilisateur passe plus de choix:

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

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

Answer 2

Juste voudrais ajouter qu'au lieu de référencement élément d'entrée par « id » à l' intérieur des fonctions de rappel de sélection et de mise au point , vous pouvez utiliser ce sélecteur, comme:

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

c'est utile lorsque vous affectez la complétion automatique pour plusieurs éléments, par exemple par classe:

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