it-swarm.com.ru

Как реализовать "mustMatch" и "selectFirst" в jQuery UI Autocomplete?

Недавно я перенес несколько своих плагинов для автозаполнения из того, что был создан с помощью bassistance , в автозаполнение пользовательского интерфейса jQuery .

Как реализовать «mustMatch» и «selectFirst», используя только обратные вызовы и другие параметры, без изменения самого кода автозаполнения ядра?

38
dochoffiday

Я думаю, что я решил обе функции ...

Чтобы упростить задачу, я использовал обычный пользовательский селектор:

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

Остальная часть кода:

$(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());
        }
    });
});

Если любое из ваших предложений по автозаполнению содержит какие-либо «специальные» символы, используемые regexp, вы должны экранировать эти символы в пределах m [3] в пользовательском селекторе:

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

и измените пользовательский селектор:

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

Я использовал что-то простое для mustMatch, и это работает. Надеюсь, это кому-нибудь поможет.

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

Я думаю, что я получил mustMatch, работающий с этим кодом ... хотя нужно тщательно проверить:

<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>
3
Esteban Feldman

Я нашел этот вопрос полезным.

Я решил опубликовать код, который я сейчас использую (адаптировано из ответ Эстебана Фельдмана ).

Я добавил свой собственный параметр mustMatch и класс CSS, чтобы выделить проблему перед сбросом значения текстового поля.

       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; }
2
GordonB

This JQuery-UI official demo has mustMatch, amongst other cool stuff: http://jqueryui.com/demos/autocomplete/#combobox

I've updated it to add autoFill, and a few other things.

Javascript:


/* stolen from http://jqueryui.com/demos/autocomplete/#combobox
 *
 * and these options added.
 *
 * - autoFill (default: true):  select first value rather than clearing if there's a match
 *
 * - clearButton (default: true): add a "clear" button
 *
 * - adjustWidth (default: true): if true, will set the autocomplete width the same as
 *    the old select.  (requires jQuery 1.4.4 to work on IE8)
 *
 * - uiStyle (default: false): if true, will add classes so that the autocomplete input
 *    takes a jQuery-UI style
 */
(function( $ ) {
    $.widget( "ui.combobox", {
        options: {
            autoFill: true,
            clearButton: true,
            adjustWidth: true,
            uiStyle: false,
            selected: null,
        },
    _create: function() {
        var self = this,
          select = this.element.hide(),
          selected = select.children( ":selected" ),
          value = selected.val() ? selected.text() : "",
              found = false;
        var input = this.input = $( "" )
                .attr('title', '' + select.attr("title") + '')
        .insertAfter( select )
        .val( value )
        .autocomplete({
            delay: 0,
            minLength: 0,
            source: function( request, response ) {
                var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                        var resp = select.children( "option" ).map(function() {
                    var text = $( this ).text();
                    if ( this.value && ( !request.term || matcher.test(text) ) )
                    return {
                        label: text.replace(
                        new RegExp(
                            "(?![^&;]+;)(?!]*)(" +
                            $.ui.autocomplete.escapeRegex(request.term) +
                            ")(?![^]*>)(?![^&;]+;)", "gi"
                        ), "$1" ),
                        value: text,
                        option: this
                    };
                });
                        found = resp.length > 0;
                response( resp );
            },
            select: function( event, ui ) {
                ui.item.option.selected = true;
                self._trigger( "selected", event, {
                    item: ui.item.option
                });
            },
            change: function( event, ui ) {
                if ( !ui.item ) {
                    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                    valid = false;
                    select.children( "option" ).each(function() {
                    if ( $( this ).text().match( matcher ) ) {
                        this.selected = valid = true;
                        return false;
                    }
                    });
                    if ( !valid || input.data("autocomplete").term=="" ) {
                    // set to first suggestion, unless blank or autoFill is turned off
                                var suggestion;
                                if(!self.options.autoFill || input.data("autocomplete").term=="") found=false;
                                if(found) {
                                    suggestion = jQuery(input.data("autocomplete").widget()).find("li:first")[0];
                                    var option = select.find("option[text="+suggestion.innerText+"]").attr('selected', true);
                                    $(this).val(suggestion.innerText);
                        input.data("autocomplete").term = suggestion.innerText;
                            self._trigger( "selected", event, { item: option[0] });
                                } else {
                                    suggestion={innerText: ''};
                                    select.find("option:selected").removeAttr("selected");
                                    $(this).val('');
                        input.data( "autocomplete" ).term = '';
                                    self._trigger( "selected", event, { item: null });
                                }
                    return found;
                    }
                }
            }
        });

            if( self.options.adjustWidth ) { input.width(select.width()); }

            if( self.options.uiStyle ) {
                input.addClass( "ui-widget ui-widget-content ui-corner-left" );
            }


        input.data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "
  • " ) .data( "item.autocomplete", item ) .append( "" + item.label + "" ) .appendTo( ul ); }; this.button = $( " " ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .insertAfter( input ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "ui-corner-right ui-button-icon" ) .click(function() { // close if already visible if ( input.autocomplete( "widget" ).is( ":visible" ) ) { input.autocomplete( "close" ); return; } // work around a bug (likely same cause as #5265) $( this ).blur(); // pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); input.focus(); }); if( self.options.clearButton ) { this.clear_button = $( " " ) .attr( "tabIndex", -1 ) .attr( "title", "Clear Entry" ) .insertAfter( input ) .button({ icons: { primary: "ui-icon-close" }, text: false }) .removeClass( "ui-corner-all" ) .click(function(event, ui) { select.find("option:selected").removeAttr("selected"); input.val( "" ); input.data( "autocomplete" ).term = ""; self._trigger( "selected", event, { item: null }); // work around a bug (likely same cause as #5265) $( this ).blur(); }); } }, destroy: function() { this.input.remove(); this.button.remove(); this.element.show(); $.Widget.prototype.destroy.call( this ); } }); })( jQuery );

    CSS (.hjq-combobox is a wrapping span)

    .hjq-combobox .ui-button { margin-left: -1px; }
    .hjq-combobox .ui-button-icon-only .ui-button-text { padding: 0; }
    .hjq-combobox button.ui-button-icon-only { width: 20px; }
    .hjq-combobox .ui-autocomplete-input { margin-right: 0; }
    .hjq-combobox {white-space: nowrap;}
    

    Note: this code is being updated and maintained here: https://github.com/tablatom/hobo/blob/master/hobo_jquery_ui/vendor/assets/javascripts/combobox.js

    1
    Bryan Larsen

    Решение, которое я использовал для реализации '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>
    
    1
    varelse

    Может быть, это просто потому, что это старая проблема, но я обнаружил, что самое простое решение уже есть в плагине, вам просто нужно использовать соответствующие функции для доступа к нему.

    Этот код будет обрабатывать случаи, когда автозаполнение теряет фокус с недопустимым значением:

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

    И этот код, так же, как и исходная функциональность bassistance, будет обрабатывать случаи, когда при автозаполнении нет совпадений:

    response: function(e, ui) {
        if (ui.content.length == 0) {
            $(this).val("");
        }
    }
    

    Это хорошо работает с источником статического массива или источником данных JSON. В сочетании с параметром autoFocus: true он, кажется, делает все необходимое эффективным образом.

    Последний случай, который вы, возможно, захотите обработать, - это что делать, когда нажата клавиша ESCAPE с недопустимым значением в текстовом поле. Что я делаю, так это использую значение первого соответствующего результата. И вот как я это делаю ...

    Сначала объявите переменную для лучшего соответствия. Делайте это вне вашего автозаполнения плагина.

    var bestMatch = "";
    

    Затем используйте следующую опцию:

    open: function(e, ui) {
        bestMatch = "";
    
        var acData = $(this).data('uiAutocomplete');
        acData.menu.element.find("A").each(function () {
            var me = $(this);
    
            if (me.parent().index() == 0) {
                bestMatch = me.text();
            }
        });
    }
    

    Наконец, добавьте следующее событие к вашему автозаполнению:

    .on("keydown", function(e) {
        if (e.keyCode == 27)        // ESCAPE key
        {
            $(this).val(bestMatch);
        }
    })
    

    Вы также можете легко заставить поле быть пустым при нажатии клавиши выхода. Все, что вам нужно сделать, это установить значение в пустую строку при нажатии клавиши вместо переменной bestMatch (которая вообще не нужна, если вы решите очистить поле).

    1
    Randy Cleary

    Я обнаружил одну проблему. Пока список предложений активен, вы можете отправить свою форму, даже если значение не соответствует предложению. Чтобы исключить это, я добавил: 

    $('form').submit(function() {
            if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
                $(this).val('');
                $("span").text("Select a valid city").show();
                return false;
            }
    });
    

    Это предотвращает отправку формы и отображает сообщение. 

    1
    CyberJunkie

    Скотт Гонсалес написал расширение selectFirst (а также несколько других) для jQueryUI AutoComplete.

    0
    JCobb

    На основании принятого ответа:

    Мои дополнительные требования: несколько автозаполнений , ненавязчивая проверка ошибок .

    change: function () {
        var target = $(this),
            widget = target.autocomplete('widget'),
            cond = widget.find('li:textEquals("' + target.val() + '")').length === 0;
    
        target.toggleClass('input-validation-error', cond);
    }
    
    0
    Tim Vermaelen

    Поздний ответ, но может помочь кому-то!

    Учитывая два события в автозаполнении виджета

    1) change - срабатывает, когда поле размыто и значение изменено.

    2) ответ - срабатывает, когда поиск завершен и меню отображается.

    Измените события изменения и ответа следующим образом:

    change : function(event,ui)
    {  
    if(!ui.item){
    $("selector").val("");
    }
    },
    
    response : function(event,ui){
    if(ui.content.length==0){
      $("selector").val("");
    }
    }
    

    Надеюсь это поможет!

    0
    RishikeshD

    Я делаю это немного по-другому, кеширую результаты и очищаю текстовое поле, если число результатов для определенного термина равно нулю:

    <script type='text/javascript'>
    function init_autocomplete( args )
    {
         var resultCache = {};
         var currentRequestTerm = null;
    
         var closeCallback = function()
         {
             // Clear text field if current request has no results
             if( resultCache[currentRequestTerm].length == 0 )
                 $(args.selector).val('');
         };
    
         var sourceCallback = function( request, responseCallback )
         {
             // Save request term
             currentRequestTerm = request.term;
    
             // Check for cache hit
             // ...
             // If no cache hit, fetch remote data
             $.post(
                 dataSourceUrl,
                 { ...  }, // post data
                 function( response )
                 {
                     // Store cache
                     resultCache[request.term] = response;
    
                     responseCallback( response );
                 }
         };
    
         $(args.selector).autocomplete({
             close:  closeCallback,
             source: sourceCallback
         });
    }
    </script>
    
    0
    Sam