javascript - jQuery - 允许插入文本的组合框

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 .在那里，如果您在“Drop Down on Focus, Single Selection”下的组合框中键入“Violet”，它将被丢弃，但我想保留该文本，以便用户插入新的颜色。

我不认为我是这个星球上唯一遇到过这个问题的人，而且我真的很确定某个地方已经有现成的解决方案，但谷歌对我隐瞒了。

PS:我的项目中已经有 jQuery，所以我更喜欢 jQuery 解决方案而不是 Bootstrap/angularJS。

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');
  });
});