更改bootstrap css下拉框的预览

Question

Here is my jsfiddle用于bootstrap css下拉菜单

目前，当我点击右侧的箭头按钮时，它会打开菜单项。

当用户点击“编辑”框（选择类别..）时，我想要删除按钮和项目。

菜单应覆盖编辑框的整个宽度。

 <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Select category ...">
              <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
              <li><a href="#">Sports</a></li>
              <li><a href="#">Entertainment</a></li>
              <li><a href="#">Politics</a></li>
              <li class="divider">Technolohy</li>
              <li><a href="#"></a></li>
            </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->

当用户将光标放在文本框上时，它应显示覆盖文本框整个宽度的菜单项

更新

Answer 1

只需在你的CSS中添加它，你就可以使用full-width-dropdown-menu .... :)

.dropdown-menu {
  width: 100%; 
}

demo here

修改

请检查jsfiddle中包含的文件 ....我们确实需要typehead.js！

demo after which i am your new best friend ：）

您需要的JS

$('.typehead').typeahead({
    name: 'Some name',
    local: ['Sports', 'Entertainment', 'Politics', 'Technolohy', 'Technolohy Again']
})
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

<强> HTML

<div class="container">
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="typehead form-control" placeholder="Select category ..." />
        </div>
    </div>
    <!-- /.col-lg-6 -->
</div>
<!-- /.row -->
    <!-- /.row -->

Answer 2

使用一些jQuery：

的jQuery

$(".btn-default").click(function () {
    var widthB = $( ".input-group" ).width();
    $('.dropdown-menu').css('width', widthB);
});   

The Fiddle