4

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

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

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

组合/下拉

4

3 回答 3

1

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

于 2013-03-01T01:36:03.647 回答
0

我发现 Chosen ( http://harvesthq.github.com/chosen/ ) 非常适合这些情况。我一直在一个没有重大问题的新项目中使用它和引导程序。

于 2013-03-01T01:13:04.950 回答
-1

在此处输入图像描述

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

<!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>
于 2014-05-14T15:18:13.007 回答