web-dev-qa-db-fra.com

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

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

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.

jqueryasp.net-mvcjquery-uiautocompletejquery-ui-autocomplete
83
Diver Dan

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

Renvoyez simplement false ou appelez event.preventDefault() pour éviter que cela ne se produise. Je recommanderais également de faire quelque chose de similaire pour l'événement focus afin d'éviter que ui.item.value Ne soit placé dans le input lorsque l'utilisateur passe au-dessus de ses 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/

201
Andrew Whitaker

Je voudrais juste ajouter cela au lieu de référencer un élément d’entrée par "id" dans sélectionner et concentrer fonctions de rappel que vous pouvez utiliser cette sélecteur, comme:

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

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

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

Dans mon cas, je dois enregistrer un autre champ 'id' dans une entrée masquée. J'ajoute donc un autre champ aux 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. Lorsque vous cliquez sur "Créer un nouveau", un modal apparaîtra et vous pouvez 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 "label" et "valeur".

J'utilise bootstrap modal et il 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>
7
Yang Zhang