4

@maha-rajaからの元の質問:

"Twitter Bootstrap ボタンのドロップダウン リストで検索を有効にする方法は何ですか?

Web ページでブートストラップ ボタンのドロップダウン リストを使用しています。リストには 20 を超えるアイテムが含まれているため、スクロール オプションを使用します。今、検索を有効にしてアイテムをすばやく選択する方法が必要です。」

4

1 に答える 1

8

ブートストラップ 3

Typeahead は Bootstrap 3 で削除されたため、代わりにhttp://github.com/twitter/typeahead.jsを使用してください。例: http://bootply.com/69994

Javascript:

   var items = new Array();
   $( ".dropdown-menu li a.hc" ).each(function( index ) {
         items.push( $(this).text() );
        });


    $('.dropdown-menu input').click(function(){return false;}); //prevent menu hide

    $('.typeahead').typeahead(
            {
                name: 'items',
                local: items
            }
     ).on('typeahead:selected', function(obj, datum) {
            if($('a.hc').filter(function(index) { return $(this).text() === datum.value; }))
                    {
                      //alert('redirect to: ' + $('a.hc').filter(function(index) { return $(this).text() === datum.value; }).attr('href')); 
                      window.location = $('a.hc').filter(function(index) { return $(this).text() === datum.value; }).attr('href');
                    }
                });

typeahead.js と追加の css を含めることを忘れないでください ( http://github.com/twitter/typeahead.jsを参照) 。

HTML:

<div class="container">
<div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><input type="text" class="typeahead"></li>    
                  <li><a class="hc" href="#">Action</a></li>
                  <li><a class="hc" href="#">Another action</a></li>
                  <li><a class="hc" href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a class="hc" href="http://www.stackoverflow.com/">Stackoverflow.com</a></li>
                </ul>
</div>
</div>

Twitter の Bootstrap 2.3.2。

http://bootply.com/66573を参照してください。typeahead 関数 ( http://twitter.github.io/bootstrap/2.3.2/javascript.html#typeahead ) を使用して、ドロップダウンから項目を選択します。

Javascript:

    function getitems()
    {
        var array = new Array();
        $( ".dropdown-menu li a.hc" ).each(function( index ) {
         array.push( $(this).text() );
        });
        return array;


    }   

    $('.dropdown-menu input').click(function(){return false;}); //prevent menu hide

    $('.typeahead').typeahead(
            {
                source: getitems,
                updater: function(item){ 
                if($('a.hc').filter(function(index) { return $(this).text() === item; }))
                    {
                      alert('redirect to: ' + $('a.hc').filter(function(index) { return $(this).text() === item; }).attr('href'));  
                      window.location = $('a.hc').filter(function(index) { return $(this).text() === item; }).attr('href');
                    }
                return item;}
            }
    );

HTML:

<div class="container">
<div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><input type="text" class="typeahead"></li>    
                  <li><a class="hc" href="#">Action</a></li>
                  <li><a class="hc" href="#">Another action</a></li>
                  <li><a class="hc" href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a class="hc" href="http://www.stackoverflow.com/">Stackoverflow.com</a></li>
                </ul>
</div>
</div>
于 2013-07-28T10:29:46.353 に答える