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

86

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.

Plongeur Dan
la source
1
Que voyez-vous dans la réponse JSON dans Firebug?
SLaks
[{"label": "Tom Smith", "value": "1234"}, {"label": "Tommy Smith", "value": "12321"}]
Diver Dan

Réponses:

215

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/

Andrew Whitaker
la source
1
Très utile! Vous ne voulez pas dire$("#selected-customer").val(ui.item.value);
juanignaciosl
1
@juanignaciosl: Non - ce code est destiné à mettre à jour le champ de recherche avec le labelau lieu du value.
Andrew Whitaker
Je stocke la valeur à db pas d'étiquette, donc la prochaine fois que je veux définir une étiquette en fonction de la valeur. Quelle est la manière de procéder?
parth.hirpara
1
Hé, j'essaie de faire quelque chose de similaire mais mets tout au focuslieu de select. Le problème est item.valuedéfini au lieu de item.label. Quoi qu'il en soit pour contourner cela? lookup.autocomplete({ source: data, focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) } })
Batman
Idem ici, je veux que l'étiquette s'affiche, la valeur POSTED. J'ai réussi à corriger un kludge impliquant un élément caché (similaire à la réponse de @Yang Zhang ci-dessous, mais à ce stade, il semble que ma propre saisie semi-automatique soit l'approche la moins inélégante.
Lori
15

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);
    }
});
Vlad
la source
8

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>

Yang Zhang
la source