Saisie semi-automatique en appliquant une valeur sans étiquette à la zone de texte

J'ai des difficultés à essayer de faire fonctionner correctement la saisie semi-automatique.

Tout me semble ok 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")

Cependant, 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.

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

Revenez simplement falseou appelez event.preventDefault()pour éviter que cela ne se produise. Je recommanderais également de faire quelque chose de similaire pour l' focusévénement afin d'éviter ui.item.valued'être placé dans le inputlorsque l'utilisateur survole les 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/

Je voudrais juste ajouter qu'au lieu de référencer l'élément d'entrée par "id" dans les fonctions de rappel de sélection et de focus , vous pouvez utiliser ce sélecteur, comme:

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

c'est utile lorsque vous attribuez la saisie semi-automatique pour plusieurs éléments, c'est-à-dire par classe:

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

Dans mon cas, je dois enregistrer un autre champ «id» dans une entrée masquée. J'ajoute donc un autre champ dans les données renvoyées par l'appel ajax.

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

Et ont ajouté un lien «créer un nouveau» au bas de la liste. En cliquant sur «créer nouveau», un modal apparaîtra et vous pourrez créer un nouvel élément à partir de là.

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

Je pense que le fait est que vous pouvez ajouter n'importe quel champ de données supplémentaire autre que simplement «étiquette» et «valeur».

J'utilise le modal bootstrap et cela peut être comme ci-dessous:

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