web-dev-qa-db-fra.com

La saisie semi-automatique de l'interface utilisateur jQuery affiche la valeur au lieu de l'étiquette dans le champ de saisie

Un problème potentiellement simple avec la saisie semi-automatique de l'interface utilisateur jQuery me bloque. Ma source est

var ac = [
    {
        label: "One Thing",
        value: "One-Thing"
    },
    {
        label: "Two Thing",
        value: "Two-Thing"
    },      
]

J'invoque le widget avec

$(function() {
    $( "#search" ).autocomplete({
        source: PK.getAutocompleteSource(),
        focus: function( event, ui ) {
            $("#search").val(ui.item.label);
            return false;  
        },
        select: function( event, ui ) {
            $("#search").val(ui.item.label);
            PK.render(ui.item.value);
        }
    });
});

Tout fonctionne bien. Lorsque je tape le #search champ de saisie, l'étiquette correspondante apparaît dans la liste déroulante et lorsque je select la recherche correcte est effectuée. Le widget affiche même le label dans le #search champ de saisie car je sélectionne différents éléments dans la liste déroulante à l'aide des touches fléchées (ou de la souris). Sauf que dès que j'appuie sur Entrée, le widget remplit le #search champ de saisie avec value au lieu de label. Ainsi, le champ affiche One-Thing au lieu de One Thing.

Comment puis-je corriger cela? Ce que j'attends, c'est sûrement le comportement le plus raisonnable, non?

jquery-ui-autocomplete
25
punkish

si vous voulez que l’étiquette soit votre valeur, il suffit d’en avoir la source

var ac = ["One Thing", "Two Thing"]

alternativement, la méthode par défaut select de la saisie semi-automatique consiste à mettre l'objet value (si spécifié) comme valeur de votre entrée. vous pouvez également mettre event.preventDefault() dans la fonction de sélection et il mettra l'étiquette comme valeur (comme vous l'avez)

select: function( event, ui ) {
        event.preventDefault();
        $("#search").val(ui.item.label);
        PK.render(ui.item.value);
    }
47
Kevin Nacios

Si vous voulez que votre étiquette soit votre valeur dans la zone de texte onFocus ET onSelect, utilisez ce code:

select: function(event, ui) { 
        $('#hiddenid').val(ui.item.value); 
        event.preventDefault(); 
        $("#search").val(ui.item.label); },

focus: function(event, ui) { 
       event.preventDefault(); 
       $("#search").val(ui.item.label);}

Il me manquait l'événement onFocus (ne définissant que l'événement onSelect). Ainsi, la valeur a continué à apparaître dans la saisie de texte.

20
Oliver E.

J'avais toujours un problème avec les touches fléchées affichant les valeurs. J'ai donc trouvé qu'il était préférable d'affecter à la fois la valeur et l'étiquette à l'étiquette, puis de mettre la valeur sur une troisième propriété des données. Par exemple, mettons-le sur id.

var ac = [
    {
        label: "One Thing",
        value: "One Thing",
        id: "One-Thing",
    },
    {
        label: "Two Thing",
        value: "Two Thing",
        id: "Two-Thing"
    },      
]

Ensuite, lorsque vous utilisez l'événement select, vous pouvez obtenir l'id de l'interface utilisateur:

select: function( event, ui ) {
    PK.render(ui.item.id);
}
5
kokorohakai