Twitter Bootstrap内联输入框带下拉菜单

Question

Twitter Bootstrap内联输入框带下拉菜单

58

我正在尝试将一个文本输入框与一个下拉按钮内联显示。但是我无法弄清楚该如何做到这一点。这是我尝试过的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>

这可行吗？

谢谢

- Misha M

2

尝试使用Bootstrap Combobox插件：http://formvalidation.io/examples/bootstrap-combobox/ - Grigory Kislin

6个回答

13

从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 -->

- clint

2

他可能想要在与输入相关联的下拉菜单上添加一个筛选器。 - caub

11

搜索"datalist"标签。

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

- Jairo Frantiesco da Silva

到目前为止，这是最容易使用的选项。不知道为什么会被踩！感谢分享，点个赞给你。 - XAMlMAX

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

a

<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

- Hoàng Vũ Tgtt

4

这是用于带有搜索输入下拉框的 Bootstrap 代码。我进行了大量搜索，然后在 JavaScript 和 HTML 中结合了 Bootstrap 进行尝试。

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代码。

输出如下：

- ashish bhatt

3

Daniel Farrell的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>

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

- ThisClark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tadeck · Accepted Answer

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

目前，文档中提供了一个输入+下拉组合框的默认实现（在此处搜索“按钮下拉菜单”）。我会保留原始解决方案，以备记录和那些现在无法使用文档中的解决方案的人使用。

原始解决方案

是的，这是可能的。事实上，在Twitter Bootstrap文档中有一个例子（请跟随链接并搜索“示例”以查找下拉按钮）：

<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>

如果按钮嵌套在文字中，它可能会像这样显示（只更改按钮上的文本，其余内容不变）：

Twitter Bootstrap dropdown button within text

编辑：

如果您想实现像下拉按钮那样附加下拉菜单的 <input>，则可以采用以下解决方案：

将 btn-group 类添加到具有 input-append 类的元素中，
在具有 input-append 类的元素末尾添加具有 dropdown-toggle 和 dropdown-menu 类的元素，
覆盖匹配 .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;
}

并且给出的代码将会得到和这张图片相同的结果:

enter image description here

编辑2: 更新了CSS选择器（从.dropdown-menu改为.dropdown-toggle）。