14

Twitter ブートストラップには、typehead と呼ばれる非常に便利なオートコンプリートのようなコンポーネントが付属しています。小さなドロップダウン ボタン (またはウィジェット) を追加して、押されたときに先行入力コンポーネントが通常のドロップダウン セレクターのように機能し、使用可能なすべてのデータ ソース バインド オプションが (ネイティブのオートコンプリート機能に加えて) 表示されるようにしようとしています。現在のマークアップは次のようなものです。

<input type="text" 
       data-provide="typeahead"
       data-items=5
       data-source='["option 1","option 2","option 3"]'>

したがって、実質的に必要なのは、コンポーネントがドロップダウン ウィジェットとオートコンプリート ウィジェットのハイブリッドとして動作することです。誰もこれを以前にやったことがありますか？ありがとう...

4

2 に答える 2

15

私はこの優れたコンポーネントを見つけました：

ソースコード
の実際の例

ただし、ロールオーバー時にドロップダウン ボタンの背景がおかしくなることがあります。この修正には、「bootstrap-combobox.css」の小さな変更が含まれます。

...
.combobox-container .add-on {
    float: left;
    display: block;
    width: auto;
    min-width: 16px;
    height: 18px;
    margin-right: -1px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 18px;
    color: #999999;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    /*   background-color: #f5f5f5; */ // <<------------ comment this line
    border: 1px solid #ccc;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}
...
于 2012-06-09T18:21:07.960 に答える
5

Fuel UXは、Bootstrap に基づく Comboboxも提供します。

于 2012-10-25T18:34:40.187 に答える