Question

我正在寻找一个允许用户搜索预定义选项数组的组合框，但是，表示允许用户在组合框中编写自定义文本，并且该文本不会被丢弃。

我已经搜索了大量看起来很酷的全功能组合框，但是如果它与任何预定义的选项都不匹配，那么每个人都会删除用户插入的文本。

我已经尝试过这些插件：

http://ivaynberg.github.io/select2/

http://harvesthq.github.io/chosen/

http://www.igniteui.com/combo/selection-and-checkboxes

这些都不是我想要的。

为确保我的问题清楚，请查看此示例：http://www.igniteui.com/combo/selection-and-checkboxes。在那里，如果您在“下拉焦点，单一选择”下的组合框中键入“Violet”，它将被放弃，但我想保留该文本，以便允许用户插入新的颜色。

我不认为我是这个星球上唯一一个遇到过这个问题的人，而且我确信某个地方已经有了一个现成的解决方案，但谷歌正在将它隐藏起来。

PS：我的项目中已经有了jQuery，所以我更喜欢使用Bootstrap / angularJS的jQuery解决方案。

Answer 1

如果您愿意将其包含在项目中，jQuery UI的autocomplete widget可以提供该功能（JSFiddle）：

要显示“组合框”，只需将minLength设置为0并在焦点上调用搜索（参见autocomlete API doc）。

 $(function() {
   var availableColors = [
     "red",
     "green",
     "blue"
   ];

  $( "#colors" ).autocomplete({
    source: availableColors, 
    minLength:0, 
    delay:0        
  });

  $('#colors').focus(function(){
    $(this).autocomplete('search');
  });
});

jQuery - 允许插入文本的Combobox

1 个答案: