Question

所有

我正在使用JQuery自动完成功能。真的太棒了。我需要您的帮助，以更好的方式使用此组件来满足我的要求。

问题：

1.使用向上和向下箭头键可以在自动完成列表框中导航。一旦我到达结束时这样做，我的意思是当焦点在列表中的最后一项时，仍然如果我按下箭头键，焦点不会立即到达第一个元素并且有一些延迟（一个键上延迟）。我该如何解决这个问题？

Plz参见以下网站提供的演示

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

在显示的文本框中输入字符'a'。

列表中的最后一项（ Scala ）重点关注。现在如果我按下箭头键，第一项即 ActionScript 没有立即突出显示（我的意思是没有聚焦）。

所以，我的疑问是

1.有没有办法立即关注第一项（最后一项之后），没有任何延迟。

2.是否可以限制焦点事件（这样我可以在到达结束时始终关注最后一项）。

Answer 1

如果您想自动选择选项，请查看此网站：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();

Answer 2

此代码将覆盖标准的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 );
    };

Jquery自动完成焦点丢失

2 个答案: