web-dev-qa-db-fra.com

Saisie semi-automatique JQuery: comment forcer la sélection dans la liste (clavier)

J'utilise la saisie semi-automatique de l'interface utilisateur JQuery. Tout fonctionne comme prévu, mais lorsque je fais défiler les touches haut/bas du clavier, je remarque que la zone de texte est remplie d'éléments dans la liste comme prévu, mais lorsque j'atteins la fin de la liste et que je frappe une fois de plus la flèche vers le bas temps, le terme d'origine que j'ai tapé apparaît, ce qui permet essentiellement à l'utilisateur de soumettre cette entrée.

Ma question: existe-t-il un moyen simple de limiter la sélection aux éléments de la liste et de supprimer le texte en entrée de la sélection au clavier?

par exemple: si j'ai une liste qui contient {'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'}, si l'utilisateur tape 'app', je sélectionnerai automatiquement le premier élément de la liste ('Pommes (AA)' ici), mais si l'utilisateur appuie sur la flèche vers le bas, "app" apparaît à nouveau dans la zone de texte. Comment puis-je empêcher cela?

Merci.

jqueryjquery-uijquery-ui-autocomplete
25
Ali B

pour la sélection forcée, vous pouvez utiliser événement "change" de saisie semi-automatique

        var availableTags = [
            "ActionScript",
            "AppleScript"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#tags").val("");
                }

            }

        });
39
Saurabh

Ces deux autres réponses combinées fonctionnent bien.

Vous pouvez également utiliser event.target pour effacer le texte. Cela est utile lorsque vous ajoutez la saisie semi-automatique à plusieurs contrôles ou lorsque vous ne souhaitez pas taper deux fois dans le sélecteur (problèmes de maintenabilité).

$(".category").autocomplete({
    source: availableTags,
    change: function (event, ui) {
        if(!ui.item){
            $(event.target).val("");
        }
    }, 
    focus: function (event, ui) {
        return false;
    }
});

Il convient de noter, cependant, que même si le "focus" renvoie faux, les touches haut/bas sélectionneront toujours la valeur. L'annulation de cet événement annule uniquement le remplacement du texte. Ainsi, "j", "bas", "onglet" sélectionnera toujours le premier élément qui correspond à "j". Il ne le montrera tout simplement pas dans le contrôle.

12
Richard

"Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused."

référence

Événement focus:

focus: function(e, ui) {
    return false;
}
3
Ricardo Alvaro Lohmann

Définissez une variable

var inFocus = false;

Ajoutez les événements suivants à votre entrée

.on('focus', function() {
    inFocus = true;
})
.on('blur', function() {
    inFocus = false;
})

Et attachez un événement keydown à la fenêtre

$(window)
    .keydown(function(e){
        if(e.keyCode == 13 && inFocus) {
            e.preventDefault();
        }
    });
2
callum.bennett