Question

我在使用这个组合框时遇到了一些困难：

http://jqueryui.com/autocomplete/#combobox

我已经在我的网站上实现了它并且效果很好，但是当人们选择了某些内容并且他们想要转到组合框中的下一个项目时，我会收到很多抱怨。通常你会点击组合框并按向下键，但这不适用于这个特定的代码。

我正在寻找的是修改此代码。

我尝试了几件事情，比如尝试将下拉列表的ui-state-focus设置为所选项目，但是我无法让它正常工作。我还尝试在下拉菜单中添加滚动条，然后在项目上设置选择突出显示。

我目前正在制作一个＆＃39; Hack＆＃39;我只是显示原始项目并编辑代码，以便在输入字段旁边显示该框的向下三角形。因此，当用户点击它时，他将获得原始下拉菜单而无法过滤它，但他可以简单地使用按键向上或向上来选择下一个或上一个。不幸的是，这非常脏，我想稍微清理一下

$.widget("custom.combobox", {
                    _create: function () {
                        this.wrapper = $("<span>")
                          .addClass("custom-combobox")
                          .insertBefore(this.element);
                        this.element.width(5).addClass("showAllButton");
                        this._createAutocomplete();
                        this._createShowAllButton();
                    },

我尝试的是可能的还是我需要使用不同的组件？如果有可能我该如何解决呢？

我想补充说过滤器/自动完成选项是强制性的。

Answer 1

您可以尝试使用流动代码替换_source方法。当过滤开始前列表不可见时，它将打开完整的选项列表，这是用户重新进入组合并按下键时所需的选项。我没有针对所有情况测试此解决方案，我知道例如，这不会选择之前选择的值，但它是一个开始:)

如果您需要进一步加强，请查看autocomplete widget以及如何扩展它以满足您的需求。

this._source = function( request, response ) {
    var input = this.input;
    var wasOpened = input.autocomplete( "widget" ).is( ":visible" );
    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
    response( this.element.children( "option" ).map(function() {
        var text = $( this ).text();
        if ( this.value && ( !wasOpened || !request.term || matcher.test(text) ) )
            return {
                label: text,
                value: text,
                option: this
            };
    }) );
}

在自动完成组合框中选择下一项的问题

1 个答案: