Question

我需要一个bootstrap兼容的下拉/自动完成控件，我可以将其附加到文本字段，并在我将光标置于文本框中时打开预填充选项。在底部应该有一个通过t.ex添加新项目的选项。点击打开模态对话框。用户还应该能够像组合框一样输入自己的文本。这是我见过许多网站使用的功能，它的工作非常好。

更具体地说，我的用例是填写发票并允许用户通过单击底部的“添加新”链接添加新产品。然后将打开模态弹出窗口，允许用户添加详细信息。当模式关闭并且产品保存以供日后使用时，发票行将设置说明，价格和增值税。此外，如果用户选择一个预填充线，则将为他设置产品。如果它是一次性产品，用户只需输入描述并手动添加价格和增值税。

我见过的最近的是select2，但它似乎没有做我想要的。 select2中的多功能和单功能之间的一种组合将是完美的。我也使用angularjs作为客户端库

Combo/dropdown

Answer 1

Angular-UI有一个基于Select2的组合框：Angular-UI

Answer 2

我发现选择（http://harvesthq.github.com/chosen/）对这些情况非常有益。我一直在新项目中使用它与bootstrap，没有重大问题。

Answer 3

enter image description here

当然，菜单项可以动态填充。

<!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>

有没有人知道twitter bootstrap兼容的组合框/自动提示控件？

3 个答案: