Jquery Auto полный фокус потерян - PullRequest
Новая
       6

Jquery Auto полный фокус потерян

0 голосов
/ 09 июня 2011

Все

Я использую автозаполнение JQuery.Это действительно круто.Мне нужна помощь с вашей стороны, чтобы лучше использовать этот компонент для моих требований.

Проблема:

1. С помощью клавиш со стрелками вверх и вниз можно перемещаться по списку автозаполнения.Делая это, как только я достигаю конца, я имею в виду, когда фокус находится на последнем элементе в списке. Тем не менее, если я нажимаю клавишу со стрелкой вниз, Фокус не сразу подходит к первому элементу, и есть некоторая задержка (задержка одной клавиши вверх),Как я могу решить эту проблему?

Пожалуйста, ознакомьтесь с демонстрацией, приведенной на следующем сайте

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

Введите символ 'a' в показанном текстовом поле.

Как только последний элемент в списке ( Scala ) сфокусирован.Теперь, если я нажму клавишу со стрелкой вниз, первый элемент, т.е. ActionScript , не будет выделен сразу (я имею в виду, что он не сфокусирован).

Итак, мои запросы

1.IsЕсть ли способ сосредоточить первый элемент сразу (после последнего элемента) без каких-либо задержек.

2.Можно ли ограничить событие фокусировки (чтобы я мог фокусировать последний элемент всегда, как только достиг конца).

Ответы [ 2 ]

1 голос
/ 09 июня 2011

Если вы хотите автоматически выбирать опции, посмотрите на этом сайте: http://github.com/scottgonzalez/jquery-ui-extensions

Я использовал этот код (для результата JSon): 

jQuery.fn.extend({
CityAC: function (selectorOrCountry) {
    return this.each(function () {
        var el = $(this);
        var id = el.attr("id");
        var md = el.metadata();
        var parentEl = $('#' + md.parentId);

        el.autocomplete({
            source: function (request, response) {
                var selectedCountry = "";
                if (selectorOrCountry !== undefined && selectorOrCountry !== null) {
                    if ($(selectorOrCountry).size() > 0) {
                        selectedCountry = $(selectorOrCountry).val();
                    } else {
                        selectedCountry = selectorOrCountry;
                    }
                }
                $.ajax({
                    url: '/Jx/GetCities',
                    type: 'post',
                    dataType: 'json',
                    data: { text: request.term, country: selectedCountry },
                    success: function (data) {
                        if (data != null) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Code
                                }
                            }));
                        }
                    }
                });
            },
            select: function (event, ui) {
                el.val(ui.item.label);
                parentEl.val(ui.item.value);
                return false;
            },
            minLength: 2
        }).data('autocomplete')._renderItem = function (ul, item) {
            var templateItem = $('<a></a>');

            templateItem.append('<img src="/Assets/images/icon_town.png" width="16" align="absmiddle" class="ui-menuitem-icon" />');
            templateItem.append(item.label);

            return $('<li></li>')
            .data('item.autocomplete', item)
            .append(templateItem)
            .appendTo(ul);
        };

        if (md.label !== undefined && md.label !== null) {
            el.val(md.label);
            parentEl.val(md.value);
            parentEl.data(md.country);
        }
    });
}
});


$('#inputID').CityAC();
0 голосов
/ 23 апреля 2015

Этот код переопределяет стандартный метод ui.autocomplete: 

$.ui.autocomplete.prototype._move = function(direction, event) {

        if ( !this.menu.element.is( ":visible" ) ) {
            this.search( null, event );
            return;
        }
        if ( this.menu.isFirstItem() && /^previous/.test( direction ))
        {
            this._value( this.term );
            this.menu._move( "first", "first", event );
        }
        else if ( this.menu.isLastItem() && /^next/.test( direction ))
        {
            this._value( this.term );
            this.menu._move( "last", "last", event );
        }

        this.menu[ direction ]( event );
    };
...