Вопрос по jquery – JQuery UI автозаполнения, когда пользователь не выбирает вариант из выпадающего

26

При использованииплагин автозаполнения jqueryЧто вы делаете, когда пользователь не выбирает элемент в списке, а вместо этого вводит допустимое значение и удаляет вкладки?

например, когда список автозаполнения содержит:

<code>Cat
Dog
Fish 
</code>

И пользовательские типыcat, но не выбираетCat из выпадающего списка автозаполнения и вместо этого вкладок. Поскольку они не выбрали ни одного элемента из списка, событие автозаполнения не срабатывает, и мы теряем возможность ответить на него:

<code>$('#Animal').autocomplete({
    source: url,
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
});
</code>

Как мне справиться с этим делом?

Обратите внимание, чтоcat а такжеCat не то же самое. gdoron
Используйте параметр автофокуса автозаполнения. Подробности смотрите в моем ответе ниже. Marques

Ваш Ответ

11   ответов
2

jQuery UI - v1.11.0 Я должен был немного изменитьСкотт Гонс & lex; расширение автоматического выбора как ниже.

/*
 * jQuery UI Autocomplete Auto Select Extension
 *
 * Copyright 2010, Scott González (http://scottgonzalez.com)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */
$().ready(function () {
    $.ui.autocomplete.prototype.options.autoSelect = true;
    $(".ui-autocomplete-input").change(function (event) {
        var autocomplete = $(this).data("uiAutocomplete");

        if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }

        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
        autocomplete.widget().children(".ui-menu-item").each(function () {
            var item = $(this).data("uiAutocompleteItem");
            if (matcher.test(item.label || item.value || item)) {
                autocomplete.selectedItem = item;
                return false;
            }
        });

        if (autocomplete.selectedItem) {
            autocomplete._trigger("select", event, { item: autocomplete.selectedItem });
        }
    });
});

И пришлось применить расширенную опцию автозаполненияautoSelect: true в моем определении автозаполнения.

Я взял немного кода из этих ответов.

trushkevich gdoron and Cagatay Kalan EDIT

Вот мое определение автозаполнения, если кто-то заинтересован.

$("your selector").autocomplete({
    // Below filter looks for the values that start with the passed in string
    source: function (request, response) {
        var matches = $.map(yourSourceArray, function (acItem) {
            if (acItem.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
                return acItem;
            }
        });
        response(matches);
    },
    // one can directly pass the source array instead like,
    // source: yourSourceArray
    autoSelect: true,
    autoFocus: true,
    minLength: 3,
    change: function (event, ui) {
        if (ui.item) {
            // do whatever you want to when the item is found
        }
        else {
            // do whatever you want to when the item is not found
        }
    }
})
0

ry 1.9.1 и jquery-ui 1.10.3. Основано на Скотте Гонсалесе ' Код и предложения здесь и несколько часов обмолота, я придумал следующее. Обратите внимание, я хотел найти решение, в котором пользователю разрешено вводить только одно из значений, предложенных автозаполнением, но я хотел разрешить случай, когда пользователь просто вводит одно из допустимых значений, не выбирая его из раскрывающегося списка:

/*
 * jQuery UI Autocomplete Auto Select Extension
 *
 * v 1.10
 * Jomo Frodo ([email protected])
 * 
 * This version requires an autoSelect parameter to be set on the autocomplete widget
 * 
 * e.g.,
 *      $("#autoCompleteID").autocomplete({
            source:url,
            minLength:1,
            autoSelect: true
        });
 * 
 * Based on an extension by Scott González (http://scottgonzalez.com) 
 * http://blog.jqueryui.com/2010/08/extensible-autocomplete/
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */

$(window).load(
        function() {

            //$.ui.autocomplete.prototype.options.autoSelect = true; 
            // Doesn't appear to work in ui 1.10.3
            // Must set the 'autoSelect' param on the autocomplete widget to get this to work.

            $(".ui-autocomplete-input").bind('autocompleteresponse',
                    function(event, ui) {
                        $(this).data('menuItems', ui.content);
                    });

            $(".ui-autocomplete-input").on(
                    "blur",
                    null,
                    function(event) {
                        var autocomplete = $(this).data("uiAutocomplete");
                        if (!autocomplete.options.autoSelect
                                || autocomplete.selectedItem) {
                            return;
                        }

                        var matcher = new RegExp("^"
                                + $.ui.autocomplete.escapeRegex($(this).val())
                                + "$", "i");
                        var menuItems = $(this).data('menuItems');
                        for (idx in menuItems) {
                            var item = menuItems[idx];
                            if (matcher.test(item.value)) {
                                autocomplete.selectedItem = item;
                                break;
                                // return false;
                            }
                        }
                        if (autocomplete.selectedItem) {
                            autocomplete._trigger("select", event, {
                                item : autocomplete.selectedItem
                            });
                        } else {
                            this.value = '';
                        }
                    });

        });
15

Скотт Гонс & lex;autoSelect extension, Просто включение этого расширения на страницу позволитselect Событие для запуска, если пользователь вводит правильное значение и не требует никаких изменений с вашей стороны:

/*
 * jQuery UI Autocomplete Auto Select Extension
 *
 * Copyright 2010, Scott González (http://scottgonzalez.com)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */
(function( $ ) {

$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).live( "blur", function( event ) {
    var autocomplete = $( this ).data( "autocomplete" );
    if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }

    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
    autocomplete.widget().children( ".ui-menu-item" ).each(function() {
        var item = $( this ).data( "item.autocomplete" );
        if ( matcher.test( item.label || item.value || item ) ) {
            autocomplete.selectedItem = item;
            return false;
        }
    });
    if ( autocomplete.selectedItem ) {
        autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
    }
});

}( jQuery ));

Here's an example using the extension: http://jsfiddle.net/vFWUt/226/

Error: User Rate Limit ExceededautoFocusError: User Rate Limit ExceededclicksError: User Rate Limit ExceededautoFocus:trueError: User Rate Limit ExceedednotError: User Rate Limit ExceededautoFocusError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded$( ".ui-autocomplete-input" ).live("blur"Error: User Rate Limit Exceededui-autocomplete-inputError: User Rate Limit Exceeded JK.
Error: User Rate Limit Exceededgithub.com/scottgonzalez/jquery-ui-extensions/blob/master/src/…
Error: User Rate Limit ExceededliveError: User Rate Limit ExceededblurError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded JK.
6

расширение автоматического выбора в ответе Эндрю Уитакера:

var item = $( this ).data( "item.autocomplete" );

быть

var item = $( this ).data( "uiAutocompleteItem" );

и тогда это работает отлично.

3

$("#inputbox").autocomplete({
    source : reuesturl,
    minLength : 1,
    select : function(event, ui) {
        $("#inputbox").attr('rel',ui.item.label);
    },
    open : function() {
        $("#inputbox").attr('rel', 0);
    },
    close : function() {                    
        if ($("#inputbox").attr('rel')=='0')
            $("#inputbox").val('');
    }
});
0

(function($) {

    $.ui.autocomplete.prototype.options.autoSelect = true;
    $('body').on('blur', '.ui-autocomplete-input', function(event) {
        var autocomplete = $(this).data('ui-autocomplete');
        if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }

        var matcher = new RegExp($.ui.autocomplete.escapeRegex($(this).val()), 'i');
        autocomplete.widget().children('.ui-menu-item').each(function(index, item) {
            var item = $( this ).data('uiAutocompleteItem');
            if (matcher.test(item.label || item.value || item)) {
                autocomplete.selectedItem = item;
                return false;
            }
        });

        if (autocomplete.selectedItem) {
            autocomplete
            ._trigger('select', event, {item: autocomplete.selectedItem});
        }
    });

}(jQuery));
7

$('#Animal').change(function(){
    var selectedValue = this.value;
    // Do what you want here:
    ...
});

Or use the built-in change event of the widget:

$('#Animal').autocomplete({
    source: url,
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
   change: function(event, ui) { // <=======
       // ... 
       // ...
   }
});

источник

Error: User Rate Limit Exceeded JK.
Error: User Rate Limit Exceeded$(selector).change(function(){ var selectedValue = this.value; var id=GetIdFromName(selectedValue); doSelectChangeEvent(id); });Error: User Rate Limit Exceeded JK.
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
autocompletechangeError: User Rate Limit Exceededui.itemError: User Rate Limit Exceeded
0

того ничего не делают. Есть идеи?

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

if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
Error: User Rate Limit ExceededautoSelect: trueError: User Rate Limit Exceeded
16

= 1.8.11 используйте для параметра autoFocus значение true

$( ".selector" ).autocomplete({ autoFocus: true });

Это дает дополнительное преимущество автоматического выбора первого элемента в списке, поэтому пользователь может просто нажать клавишу «Ввод» или «Tab», чтобы выбрать его, не вводя все имя.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
1

ей jquery ui 1.10.3, я тестировал приведенный ниже код только с версией 1.10.3.

(function($) {

$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).live( "blur", function( event ) {
    var autocomplete = $( this ).data( "ui-autocomplete" );
    if ( ! autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }

    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
    autocomplete.widget().children( ".ui-menu-item" ).each(function() {
        var item = $( this ).data( "ui-autocomplete-item" );
        if ( matcher.test( item.label || item.value || item ) ) {
            autocomplete.selectedItem = item;
            return false;
        }
    });
    if ( autocomplete.selectedItem ) {
        autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
    }
});
}(jQuery));
0

autoFocus: true

$('#Animal').autocomplete({
    source: url,
    **autoFocus: true,**
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
});

Похожие вопросы