4

テキストフィールドにアタッチでき、テキストボックス内にカーソルを置くとオプションが事前に入力されて開く、ブートストラップ互換のドロップダウン/オートコンプリートコントロールが必要です。下部には、t.ex で新しいアイテムを追加するオプションがあるはずです。クリックするとモーダル ダイアログが開きます。ユーザーは、コンボボックスのように独自のテキストを入力できる必要があります。これは、多くの Web サイトで使用されている機能であり、非常にうまく機能します。

より具体的には、私のユースケースは、請求書に記入し、ユーザーが下部の「新規追加」リンクをクリックして新しい製品を追加できるようにすることです。モーダル ポップアップが開き、ユーザーが詳細を追加できるようになります。モーダルが閉じて製品が後で保存されると、請求明細行に説明、価格、付加価値税が設定されます。また、ユーザーが事前に入力された行のいずれかを選択すると、製品が設定されます。1 回限りの製品の場合、ユーザーは説明を入力し、価格と付加価値税を手動で追加するだけです。

私が見た中で最も近いのは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 に答える