web-dev-qa-db-fra.com

La saisie semi-automatique interdit-elle l'entrée de texte libre?

Est-il possible d'interdire l'entrée de texte libre dans le widget de saisie semi-automatique de l'interface utilisateur JQuery?

par exemple, je veux seulement que l'utilisateur soit autorisé à sélectionner dans la liste des éléments qui sont présentés dans la liste de saisie semi-automatique, et je ne veux pas qu'ils puissent écrire du texte aléatoire.

Je n'ai rien vu dans les démos/documents décrivant comment faire cela.

http://jqueryui.com/demos/autocomplete/

J'utilise la saisie semi-automatique comme celle-ci

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        // etc
    }
jqueryjquery-uijquery-autocomplete
42
JK.

Une façon serait d'utiliser une validation supplémentaire lors de l'envoi du formulaire (si vous utilisez un formulaire) pour mettre en évidence une erreur si le texte n'est pas l'une des options valides.

Une autre façon serait d'attacher à l'événement de modification de la saisie automatique qui sera déclenché même si aucune option n'est sélectionnée. Vous pouvez ensuite faire une validation pour vous assurer que l'entrée utilisateur est dans votre liste ou afficher une erreur si ce n'est pas le cas.

3
Aaron Janes

Selon la documentation API , la propriété changeui de l'événement _ est nulle si l'entrée n'a pas été choisie dans la liste, vous pouvez donc interdire le texte libre aussi simplement que celui-ci :

change: function(event, ui) {
    if (ui.item == null) {
      event.currentTarget.value = ''; 
      event.currentTarget.focus();
    }
}
83
Neils

Si vous souhaitez que l'utilisateur récupère simplement l'élément dans la liste, utilisez la zone de liste déroulante de saisie semi-automatique.

http://jqueryui.com/demos/autocomplete/#combobox

HTH

10
Raja

Si vous souhaitez restreindre l'utilisateur à choisir une recommandation dans la liste de saisie semi-automatique, essayez de définir la fonction de fermeture comme ceci. La fonction de fermeture est appelée lorsque le menu déroulant des résultats se ferme, si l'utilisateur sélectionné dans la liste, alors event.currentTarget est défini, sinon, le menu déroulant des résultats est fermé sans que l'utilisateur sélectionne une option. S'ils ne sélectionnent pas d'option, je réinitialise l'entrée à vide.

/**
 * The jQuery UI plugin autocomplete
 */
$.widget( "ui.autocomplete", $.ui.autocomplete, {
   options: {
      close: function( event, ui ) {
         if (typeof event.currentTarget == 'undefined') {
            $(this).val("");
         }
      }
   }
 });
0
user7793758

Vieille question, mais ici:

    var defaultVal = '';
    $('#selector').autocomplete({
        source: url,
        minlength: 2,
        focus: function(event, ui) {
            if (ui != null) {
                defaultVal = ui.item.label;
            }
        },
        close: function(event, ui) {
            $('#searchBox').val(defaultVal);
        }
    });
0
Joe

J'ai utilisé le module combobox qui vous donne un bouton "flèche vers le bas". Ensuite, à la balise d'entrée, ajoutez simplement ce qui suit à la balise d'entrée juste autour de la ligne 41 (selon votre version de la zone de liste déroulante http://jqueryui.com/demos/autocomplete/#combobox )

input.attr ("en lecture seule", "en lecture seule");

Ajoutez ensuite du code pour que si l'utilisateur clique sur la zone de saisie, il affichera la liste déroulante.

Pour mes besoins, j'ai ajouté un indicateur en lecture seule que je peux transmettre au module, donc si j'en ai besoin en lecture seule, je peux également l'activer/le désactiver.

0
Mike