有人知道与 twitter bootstrap 兼容的组合框/自动建议控件吗？
Posted
技术标签:
【中文标题】有人知道与 twitter bootstrap 兼容的组合框/自动建议控件吗？【英文标题】：Does anybody know a twitter bootstrap compatible combobox/autosuggest control? 【发布时间】：2013-02-15 09:05:06 【问题描述】：我需要一个与引导程序兼容的下拉/自动完成控件，我可以将其附加到文本字段并在我将光标放在文本框内时打开预填充的选项。在底部应该有一个通过 t.ex 添加新项目的选项。单击时打开一个模式对话框。用户还应该能够像使用组合框一样输入自己的文本。这是我见过很多网站都在使用的功能，而且效果很好。
更具体地说，我的用例是填写发票并允许用户通过单击底部的“添加新”链接来添加新产品。然后将打开一个模式弹出窗口，允许用户添加详细信息。当模式关闭并保存产品以供以后使用时，发票行将设置描述、价格和增值税。此外，如果用户选择其中一个预填充行，则将为他设置产品。如果它是一次性产品，用户只需输入描述并手动添加价格和增值税。
我见过的最接近的是select2，但它似乎并没有达到我想要的效果。 select2 中的多种功能和单一功能之间的一种组合将是完美的。我也使用 angularjs 作为客户端库
【问题讨论】：
【参考方案1】：Angular-UI 有一个基于 Select2 的组合框：Angular-UI
【讨论】：
谢谢。我已经看到了，但它实际上只是 select2 的包装，所以它没有添加任何额外的功能 所以你想在底部添加一个额外的链接来“添加新客户端”，而不是添加用户输入的任何内容（如果它不存在）？ 两者。在我的例子中，下拉选项是发票行的产品。通过单击“添加新”，我可以在模式弹出窗口中添加新产品。如果客户只需要一次性产品，他只需手动添加描述。通过在下拉列表中选择一个项目，描述价格和增值税会自动设置 可行，但您现在处于自定义指令领域。至于罐装 jquery 的东西，我最近刚刚做了一个画布，不记得看到过那个特定的功能。几乎所有人都做了“如果它不存在就添加这个项目”，但没有你描述的附加链接。 我对原始问题添加了更好的描述。完美的解决方案是使用此功能扩展 select2 并在顶部添加一个角度指令。我不太擅长 javascript，所以我希望已经存在解决方案【参考方案2】：我发现 Chosen (http://harvesthq.github.com/chosen/) 非常适合这些情况。我一直在一个没有重大问题的新项目中使用它和引导程序。
【讨论】：
【参考方案3】：当然，菜单项可以动态填充。
<!DOCTYPE html>
<head>
<title>Combobox Test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
body
padding:20px;
.dropdown-menu>li
cursor:pointer;
.dropdown-menu
padding-left:2px;
right: auto;
top:23px
.combobox-item
color:#aaa;
.combobox-item:hover
color:#000;
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function()
$(".combobox-item").unbind("click").click( function(e)
var input = $(e.target).parents('li').children('input.combobox');
if (e.target.className.indexOf("combobox-empty") == -1)
$(input).val(e.target.innerHTML.trim()).attr("placeholder", "enter something").focus();
else
$(input).val("").attr("placeholder", "what other?").focus();
);
);
</script>
</head>
<body>
<ul class="nav">
<li class="dropdown">
<input type="text" class="combobox" placeholder="enter something" class="dropdown-toggle" data-toggle="dropdown">
<ul class="dropdown-menu" role="menu" id="dropdown-menu">
<li class="combobox-item combobox-empty">Other</li>
<li class="divider"></li>
<li class="combobox-item">Foo</li>
<li class="combobox-item">Bar</li>
</ul>
</li>
</ul>
</body>
</html>
【讨论】：
投反对票，因为这与问题中标记的 AngularJS 没有任何关系（以及我如何通过搜索找到问题）。以上是关于有人知道与 twitter bootstrap 兼容的组合框/自动建议控件吗？的主要内容，如果未能解决你的问题，请参考以下文章
Twitter Bootstrap 中的 Font Awesome 与 Glyphicons
如何将 JQuery Datatable.net 与 ASP.Net 4 Razor 和 Twitter Bootstrap 一起使用
在 ASP.NET 中设置 Twitter Bootstrap 按钮单选组的活动状态