JQuery autocomplete: comment forcer la sélection à partir de la liste (clavier)
j'utilise jQuery UI autocomplete. Tout fonctionne comme prévu, mais quand je tourne avec les touches HAUT/BAS sur le clavier, je remarque que la boîte de texte est remplie d'éléments dans la liste comme prévu, mais quand j'atteins la fin de la liste et appuie sur la flèche vers le bas une fois de plus, le terme original que j'ai tapé apparaît, ce qui permet essentiellement à l'utilisateur de soumettre cette entrée.
Ma question: Est-il un moyen simple de limiter la sélection d'éléments dans la liste, et de supprimer le texte dans les entrées de la sélection de clavier?
ex: si j'ai une liste qui contient {'Apples (AA)', 'Oranges (AAA)', 'Carrots (A)'}, si l'utilisateur tape 'app', je sélectionne 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 de nouveau dans la zone de texte. Comment puis-je éviter cela?
Merci.
4 réponses
pour la sélection de la force, vous pouvez utiliser événement"change" de la 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("");
}
}
});
ces deux autres réponses combinées fonctionnent bien.
Vous pouvez aussi utiliser l'événement.cible pour effacer le texte. Cela aide lorsque vous ajoutez auto-complete à plusieurs commandes ou lorsque vous ne voulez pas taper dans le sélecteur deux fois (problèmes de maintenabilité là).
$(".category").autocomplete({
source: availableTags,
change: function (event, ui) {
if(!ui.item){
$(event.target).val("");
}
},
focus: function (event, ui) {
return false;
}
});
il faut noter, cependant, que même si le "focus" retourne false, les touches up/down sélectionneront quand même la valeur. L'annulation de cet événement annule seulement le remplacement du texte. Ainsi, "j", "bas", "onglet" sera toujours sélectionner le premier élément qui correspond à "j". Il ne le montre pas dans le contrôle.
"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
Sur les événements de focus:
focus: function(e, ui) {
return false;
}
définir une variable
var inFocus = false;
ajouter les évènements suivants à votre entrée
.on('focus', function() {
inFocus = true;
})
.on('blur', function() {
inFocus = false;
})
Et attacher un événement keydown à la fenêtre
$(window)
.keydown(function(e){
if(e.keyCode == 13 && inFocus) {
e.preventDefault();
}
});