带有下拉菜单的 Twitter Bootstrap 内联输入

Question

我正在尝试使用下拉按钮显示文本输入。我无法弄清楚如何做到这一点。这是我尝试过的 HTML（我已将所有内容放在一行中，但没有结果）：

<div class="input-append">
  <input type="text" placeholder="foo" class="input-mini">
  <div class="btn-group">
    <a id="amount_type" class="btn dropdown-toggle" data-toggle="dropdown" href="#">10<span class="caret"></span></a>
    <ul id="amount_type_options" class="dropdown-menu">
      <li class="selected"><a href="#">10</a></li>
      <li><a href="#">100</a></li>
      <li><a href="#">1000</a></li>
    </ul>
  </div>
</div>

这可能吗？

谢谢

Answer 1

当前状态：文档中的默认实现

目前在文档here 中有输入+下拉组合的默认实现（搜索“按钮下拉菜单”）。我将原始解决方案留作记录，并留给那些无法使用文档中现在包含的解决方案的人。

原方案

是的，这是可能的。事实上，the Twitter Bootstrap documentation 中有一个示例（点击链接并在“示例”中搜索下拉按钮）：

<div class="btn-group">
    <a class="btn btn-primary" href="#">
        <i class="icon-user icon-white"></i> User
    </a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
</div>

如果包含在文本中，它可能看起来像这样（按钮上的文本已更改，没有其他内容）：

编辑：

如果您尝试在下拉按钮中使用附加下拉菜单来实现<input>，那么这是解决方案之一：

1. 将btn-group 类添加到具有input-append 类的元素，
2. 在类input-append的元素末尾添加类dropdown-toggle和dropdown-menu的元素，
3. 覆盖与.input-append .btn.dropdown-menu 匹配的元素的样式，使其没有float: left（否则将进入下一行）。

生成的代码可能如下所示：

<div class="input-append btn-group">
    <input class="span2" id="appendedInputButton" size="16" type="text">
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
</div>

在这种样式覆盖的支持下：

.input-append .btn.dropdown-toggle {
    float: none;
}

并为您提供与此完全相同的结果：

编辑 2： 更新了 CSS 选择器（原为 .dropdown-menu，原为 .dropdown-toggle）。

Answer 2

从 Bootstrap 3.x 开始，此处的文档中有一个示例：http://getbootstrap.com/components/#input-groups-buttons-dropdowns

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /input-group -->

Answer 3

搜索“datalist”标签。

<input list="texto_pronto" name="input_normal">
<datalist id="texto_pronto">
    <option value="texto A">
    <option value="texto B">
</datalist>

Answer 4

这是带有输入搜索下拉菜单的 Bootstrap 代码。 我搜索了很多，然后我用引导程序在 javascript 和 html 中尝试它，

HTML 代码：

<div class="form-group">
    <label class="col-xs-3 control-label">Language</label>
    <div class="col-xs-7">
        <div class="dropdown">
          <button id="mydef" class="btn dropdown-toggle" type="button" data-toggle="dropdown" onclick="doOn(this);">
            <div class="col-xs-10">
                <input type="text" id="search" placeholder="search" onkeyup="doOn(this);"></input>
            </div>
            <span class="glyphicon glyphicon-search"></span>
         </button>
      <ul id="def" class="dropdown-menu" style="display:none;" >
            <li><a id="HTML" onclick="mydef(this);" >HTML</a></li>
            <li><a id="CSS" onclick="mydef(this);" >CSS</a></li>
            <li><a id="JavaScript" onclick="mydef(this);" >JavaScript</a></li>
      </ul>
      <ul id="def1" class="dropdown-menu" style="display:none"></ul>
    </div>
</div>

Javascript 代码：

function doOn(obj)
     {

        if(obj.id=="mydef")
        {
            document.getElementById("def1").style.display="none";
            document.getElementById("def").style.display="block";
        }
        if(obj.id=="search")
        {
            document.getElementById("def").style.display="none";

            document.getElementById("def1").innerHTML='<li><a id="Java" onclick="mydef(this);" >java</a></li><li><a id="oracle" onclick="mydef(this);" >Oracle</a></li>';

            document.getElementById("def1").style.display="block";
        }

    }
    function mydef(obj)
    {
        document.getElementById("search").value=obj.innerHTML;
        document.getElementById("def1").style.display="none";
        document.getElementById("def").style.display="none";
    }

您也可以根据需要使用 jquery 和 json 代码。

输出如下：

Answer 5

这是我的解决方案是使用 display: inline

Some text <div class="dropdown" style="display:inline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div> is here

一个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />Your text
<div class="dropdown" style="display: inline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>is here

Answer 6

Daniel Farrell's Bootstrap Combobox 完美地完成了这项工作。这是他的 GitHub 存储库中的一个示例。

$(document).ready(function(){
  $('.combobox').combobox();
  
  // bonus: add a placeholder
  $('.combobox').attr('placeholder', 'For example, start typing "Pennsylvania"');
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/css/bootstrap-combobox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/js/bootstrap-combobox.min.js"></script>

<select class="combobox form-control">
  <option></option>
  <option value="PA">Pennsylvania</option>
  <option value="CT">Connecticut</option>
  <option value="NY">New York</option>
  <option value="MD">Maryland</option>
  <option value="VA">Virginia</option>
</select>

作为额外的奖励，我在脚本中包含了一个占位符，因为将其应用于标记不成立。