html - 更改 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 -->