Comment mettre en œuvre "mustMatch" et "selectFirst" en jQuery UI Autocomplete?

Question

J'ai récemment migré un peu de ma saisie semi-automatique des plugins de celle produite par bassistance à l' jQuery UI autocomplete.

Comment le "mustMatch" et "selectFirst" être mis en œuvre avec juste des rappels et d'autres options sans modifier le noyau de saisie semi-automatique du code lui-même?

Answer 1

Je pense que j'ai résolu les deux fonctions...

Pour faciliter les choses, j'ai utilisé une coutume sélecteur:

$.expr[':'].textEquals = function (a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};

Le reste du code:

$(function () {
    $("#tags").autocomplete({
        source: '/get_my_data/',
        change: function (event, ui) {
            //if the value of the textbox does not match a suggestion, clear its value
            if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
                $(this).val('');
            }
        }
    }).live('keydown', function (e) {
        var keyCode = e.keyCode || e.which;
        //if TAB or RETURN is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion
        if((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {
            $(this).val($(".ui-autocomplete li:visible:first").text());
        }
    });
});

Si l'un de vos suggestions de saisie semi-automatique contenir de "spécial", les caractères utilisés par les regexp, vous devez vous échapper de ces caractères dans m[3] dans la boîte de sélecteur:

function escape_regexp(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}

et changer la coutume sélecteur:

$.expr[':'].textEquals = function (a, i, m) {
  return $(a).text().match("^" + escape_regexp(m[3]) + "$");
};

Answer 2

J'ai utilisé de quelque chose d'aussi simple que cela pour mustMatch et il fonctionne. J'espère que cela aide quelqu'un.

        change: function (event, ui) {
            if (!ui.item) {
                 $(this).val('');
             }
        }

Answer 3

Je crois que j'ai le mustMatch de travail avec ce code... besoin de fond de tester si:

<script type="text/javascript">
    $(function() {
        $("#my_input_id").autocomplete({
            source: '/get_my_data/',
            minChars: 3,
            change: function(event, ui) {
                // provide must match checking if what is in the input
                // is in the list of results. HACK!
                var source = $(this).val();
                var found = $('.ui-autocomplete li').text().search(source);
                console.debug('found:' + found);
                if(found < 0) {
                    $(this).val('');
                }
            }
        });
    });
</script>

Answer 4

J'ai trouvé cette question pour être utile.

Je pensais que je poste le code, je suis maintenant à l'aide de (adapté de Esteban Feldman réponse).

J'ai ajouté ma propre mustMatch option, et une classe CSS pour mettre en évidence la question avant de réinitialiser la zone de texte valeur.

       change: function (event, ui) {
          if (options.mustMatch) {
            var found = $('.ui-autocomplete li').text().search($(this).val());

            if (found < 0) {
              $(this).addClass('ui-autocomplete-nomatch').val('');
              $(this).delay(1500).removeClass('ui-autocomplete-nomatch', 500);
            }
          }
        }

CSS

.ui-autocomplete-nomatch { background: white url('../Images/AutocompleteError.gif') right center no-repeat; }

Answer 5

La solution que j'ai utilisé pour mettre en œuvre mustMatch':

<script type="text/javascript">
...

$('#recipient_name').autocomplete({
    source: friends,
    change: function (event, ui) {
        if ($('#message_recipient_id').attr('rel') != $(this).val()) {
            $(this).val('');
            $('#message_recipient_id').val('');
            $('#message_recipient_id').attr('rel', '');
        }
    },
    select: function(event, ui) {
        $('#message_recipient_id').val(ui.item.user_id);
        $('#message_recipient_id').attr('rel', ui.item.label);
    }
}); 

...
</script>