La saisie semi-automatique interdire la libre entrée de texte?

Est-il possible de refuser d'entrer du texte libre dans le JQuery UI autocomplete widget?

par exemple, je veux seulement que l'utilisateur soit autorisé à sélectionner à partir de la liste des éléments qui sont présentés dans la liste de saisie semi-automatique, et ne veulent pas d'eux pour être en mesure d'écrire du texte aléatoire.

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

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

Je suis en utilisant la saisie semi-automatique comme ce

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        //etc
    }
InformationsquelleAutor JK. | 2010-05-25
  1. 3

    Un autre moyen serait d'utiliser une validation supplémentaire sur le formulaire de soumission (si vous utilisez un formulaire) pour mettre en surbrillance une erreur si le texte n'est pas l'une de l'option valide.

    Une autre façon serait de joindre à l'auto complète de l'événement de changement qui va me faire virer, même si une option n'est pas sélectionnée. Vous pourrez alors faire une validation afin de s'assurer de la saisie de l'utilisateur dans votre liste ou afficher une erreur si elle ne l'est pas.

    • Je suis allé avec le .modifier() de l'événement, il était plus facile et plus rapide que d'essayer de changer la zone de liste déroulante la solution.
    • l'a souligné ci-dessous une autre réponse et qui a travaillé comme un charme changement: function(event,ui) { si (ui.item==null) { $("#your_input_box").val("); $("#your_input_box").focus(); } }
    InformationsquelleAutor Aaron Janes
  2. 77

    Selon la La documentation de l'API, le change de l'événement ui propriété est null si l'entrée n'a pas été choisi à partir de la liste, de sorte que vous pouvez désactiver les gratuit texte simplement comme ceci:

    change: function(event, ui) {
    if (ui.item == null) {
        $("#your_input_box").val("");
        $("#your_input_box").focus();
    }
}
    • A travaillé pour moi, joli 🙂
    • A fonctionné pour moi aussi 😉
    • change: (e, ui) -> ($ '#input_box').val('').focus() if not ui.item pour la Coffeescripters.
    • event.currentTarget.value = ''; event.currentTarget.focus(); tous les cas où cela ne fonctionnerait pas?
    • Il a travaillé pour moi. Je vous remercie beaucoup.
    • Meilleure réponse c'est la bonne façon de les gérer.
    • fonctionne parfaitement. sur le changement de saisie semi-automatique si pas d'élément sélectionné définir val de rien. son ok
    • Devrait être acceptée réponse! Je dirais $(this).val(""); $(this).focus();

    InformationsquelleAutor Neils
  3. 10

    Si vous souhaitez que l'utilisateur vient d'obtenir l'élément dans la liste, puis utiliser la saisie semi-automatique zone de liste déroulante.

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

    HTH

    • Vous pouvez toujours taper dedans, c'est exactement ce qu'il a dit qu'il ne voulait pas.
    • Non, je ne pense pas qu'il veut. Je pense qu'il veut obtenir à partir de l'élément dans la liste, c'est à dire si l'utilisateur commence à taper "Ja" alors si c'listes de "Java" et "Javascript", puis il demande à l'utilisateur de sélectionner l'un d'eux et non pas de type "Jab" et les soumettre.
    • Non j'ai dit de saisie semi-automatique, ce qui implique la saisie est autorisée. Mais la saisie doit être limitée aux seuls éléments dans la liste de saisie semi-automatique. La zone de liste déroulante exemple est exactement ce que fait.
    • Combobox fonctionnellement est parfait, mais l'INTERFACE est mauvaise, elle est très différente de la norme de la < select >, donc je ne peux pas l'utiliser. Je vais regarder l'exemple plus en détail pour voir si la liste déroulante peut être laissé de côté.
    • Je suis le seul que mal compris ce qu'il voulait, alors. Fait hors de propos modification de cette réponse que je puisse reprendre ma downvote.
    InformationsquelleAutor Raja
  4. 0

    J'ai utilisé de la zone de liste déroulante module qui vous donne une "flèche bas" bouton. Puis à la balise input, il suffit d'ajouter le texte suivant à la balise d'entrée à droite autour de la ligne 41 (selon votre version de la zone de liste déroulante http://jqueryui.com/demos/autocomplete/#combobox )

    d'entrée.attr("readonly", "readonly");

    Puis ajoutez le code de sorte que si l'utilisateur clique sur la zone de saisie, il va montrer la liste déroulante.

    Pour ma part, j'ai ajouté un readonly drapeau que je peux passer dans le module, donc si j'en ai besoin en lecture seule, je peux l'activer/désactiver ainsi.

    InformationsquelleAutor Mike
  5. 0

    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);
        }
    });
    InformationsquelleAutor Joe
  6. -1

    La zone de liste déroulante de l'option fonctionne bien si vous utilisez une liste, toutefois, si vous avez une dynamique de la liste générée par l'intermédiaire d'un json obtenir, alors vous ne pouvez capturer les données sur le changement.

    Exemple complet avec des paramètres supplémentaires ci-dessous.

            $("#town").autocomplete(
        {       
            select: function( event, ui ) {
                $( "#town" ).val( ui.item.value );
                return false;
            },        
            focus: function( event, ui ) {
                    $( "#town" ).val( ui.item.label );
                    return false;
                },           
            change: function(event, ui) {
                if (!ui.item) {
                    $("#town").val("");
                }
            },
            source: function(request, response) {
                $.ajax({
                    url: 'urltoscript.php',
                    dataType: "json",
                    data: {
                        term : request.term,
                        country : $("#abox").val()    //extra parameters
                    },                        
                    success: function(data) {
                        response($.map(data,function (item)
                        {                                
                            return {
                                id: item.id,
                                value: item.name
                            };
                        }));
                    }
                });
            },
            minLength: 3
            , highlightItem: true                                
        });
    InformationsquelleAutor PodTech.io
  7. -2

    Ce sujet mustMatch option?

    'Si la valeur est true, l'autocomplétion autorise uniquement les résultats qui sont présentés par le backend. Notez que les valeurs de résultat dans une zone de saisie vide.'

    • mustMatch est une option d'être obsolète, jQuery Autocomplete plugin, ce sujet est à propos de jQuery-ui Autocomplete composant.
    InformationsquelleAutor MAC