2014-10-07 134 views
0

我有这个组合框一些困难选择下一个项目:问题在自动完成组合框

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

我实现它在我的网站,它的伟大工程,但我得到投诉的负载当人们选择了某些东西并且他们想要去组合框中的下一个项目时。 通常你会点击组合框并按下向下键,但这不适用于这个特定的代码。

我在找的是修改这段代码。

我已经尝试了几件事情,比如尝试将下拉列表的ui-state-focus设置为所选项目时显示,但我无法使其正常工作。 我也尝试添加一个滚动条到下拉菜单,然后设置项目上的选择高亮显示。

我目前做了一个'哈克',在那里我只显示原始项目并编辑了代码,以便该框的下三角形在输入字段旁边可见。所以当用户点击它时,他会得到原始的下拉菜单而不能过滤它,但他可以简单地使用键或向上来选择下一个或上一个。 不幸的是,这是非常肮脏,我想它清理干净一点

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

就是我想可能还是需要使用不同的组成部分?如果可能我应该如何解决它?

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

回答

0

您可以尝试用流动代码替换_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 
      }; 
    })); 
}