Twitter Built-in bootstrap input with drop-down list

Question

I am trying to display inline text input with a drop down button. I can’t figure out how to do this. Here is the HTML I tried (I put it all on one line without any results):

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

Is it possible?

thank

Answer 1

Current state: default implementation in documents

Currently, the documentation here uses the standard version of input + a drop-down list (search on drop-down lists of buttons). I leave the original recording solution for those who cannot use the solution that is now included in the documentation.

Original solution

Yes it is possible. There is actually one example from the Twitter Bootstrap documentation (follow the link and search for “Examples” for the drop-down buttons):

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

If it is enclosed in text, it may look like this (the text on the button has been changed, nothing more):

EDIT:

If you are trying to reach <input> with dropdown menu added, as in dropdown menus, this is one solution:

• Add the btn-group class to the element with the input-append class,
• Add elements with classes dropdown-toggle and dropdown-menu at the end of the element with class input-append ,
• The override style to match the .input-append .btn.dropdown-menu element, so it does not have float: left (otherwise it will fall into the next line).

The resulting code may look like this:

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

with little support for this style override:

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

and get the same result:

EDIT 2: Updated CSS selector (was .dropdown-menu , is .dropdown-toggle ).

Answer 2

Like Bootstrap 3.x, here is an example of this in the docs: 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

It is my decision to use 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 

but

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

This is the code for Bootstrap with a drop down box. I searched a lot and then tried it in javascript and html with loading,

HTML code:

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

 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"; } 

You can use jquery and json code also as per your requirements.

Output:

Answer 5

Daniel Farrell Bootstrap Combobox works great. Here is an example from his GitHub repository.

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

As an added bonus, I have included a placeholder in the script, since its application to the markup does not work.

Answer 6

Search "datalist tag"

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