Twitter Bootstrap inline input with dropdown

Question

I m trying to display a text input inline with a dropdown button   I can t figure out how to do this though   Here s the HTML I ve tried  I ve put all of it on a single line with no results     lt div class  input-append  gt     lt input type  text  placeholder  foo  class  input-mini  gt     lt div class  btn-group  gt       lt a id  amount type  class  btn dropdown-toggle  data-toggle  dropdown  href     gt 10 lt span class  caret  gt  lt  span gt  lt  a gt       lt ul id  amount type options  class  dropdown-menu  gt         lt li class  selected  gt  lt a href     gt 10 lt  a gt  lt  li gt         lt li gt  lt a href     gt 100 lt  a gt  lt  li gt         lt li gt  lt a href     gt 1000 lt  a gt  lt  li gt       lt  ul gt     lt  div gt   lt  div gt    Is this possible   Thank you

User · Answer

This is the code for Bootstrap with input search dropdown. I search a lot then i try its in javascript and html with bootstrap,

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

Output like:

User · Answer

This is my solution is use  display  inline  Some text  lt div class  dropdown  style  display inline  gt     lt button class  btn btn-default dropdown-toggle  type  button  id  dropdownMenu1  data-toggle  dropdown  aria-haspopup  true  aria-expanded  true  gt      Dropdown      lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu  aria-labelledby  dropdownMenu1  gt       lt li gt  lt a href     gt Action lt  a gt  lt  li gt       lt li gt  lt a href     gt Another action lt  a gt  lt  li gt       lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt       lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt     lt  ul gt   lt  div gt  is here   a   x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap-theme min css  rel  stylesheet    gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet    gt Your text x000D   lt div class  dropdown  style  display  inline  gt  x000D     lt button class  btn btn-default dropdown-toggle  type  button  id  dropdownMenu1  data-toggle  dropdown  aria-haspopup  true  aria-expanded  true  gt  x000D      Dropdown x000D       lt span class  caret  gt  lt  span gt  x000D     lt  button gt  x000D     lt ul class  dropdown-menu  aria-labelledby  dropdownMenu1  gt  x000D       lt li gt  lt a href     gt Action lt  a gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt Another action lt  a gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt Something else here lt  a gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt Separated link lt  a gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  div gt is here x000D   x000D   x000D

User · Answer

Search for the  quot datalist quot  tag   lt input list  quot texto pronto quot  name  quot input normal quot  gt   lt datalist id  quot texto pronto quot  gt       lt option value  quot texto A quot  gt       lt option value  quot texto B quot  gt   lt  datalist gt

User · Answer

Daniel Farrell s Bootstrap Combobox does the job perfectly  Here s an example from his GitHub repository    x000D   x000D    document  ready function    x000D        combobox   combobox    x000D     x000D       bonus  add a placeholder x000D        combobox   attr  placeholder    For example  start typing  Pennsylvania     x000D      x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs bootstrap-combobox 1 1 8 css bootstrap-combobox min css  gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs bootstrap-combobox 1 1 8 js bootstrap-combobox min js  gt  lt  script gt  x000D   x000D   lt select class  combobox form-control  gt  x000D     lt option gt  lt  option gt  x000D     lt option value  PA  gt Pennsylvania lt  option gt  x000D     lt option value  CT  gt Connecticut lt  option gt  x000D     lt option value  NY  gt New York lt  option gt  x000D     lt option value  MD  gt Maryland lt  option gt  x000D     lt option value  VA  gt Virginia lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    As an added bonus  I ve included a placeholder in script since applying it to the markup does not hold

User · Answer

As of Bootstrap 3 x  there s an example of this in the docs here  http   getbootstrap com components  input-groups-buttons-dropdowns   lt div class  input-group  gt     lt input type  text  class  form-control  aria-label       gt     lt div class  input-group-btn  gt       lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  aria-expanded  false  gt Action  lt span class  caret  gt  lt  span gt  lt  button gt       lt ul class  dropdown-menu dropdown-menu-right  role  menu  gt         lt li gt  lt a href     gt Action lt  a gt  lt  li gt         lt li gt  lt a href     gt Another action lt  a gt  lt  li gt         lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt         lt li class  divider  gt  lt  li gt         lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt       lt  ul gt     lt  div gt  lt  --  btn-group -- gt   lt  div gt  lt  --  input-group -- gt

User · Answer

Current state  default implementation in docs  Currently there is a default implementation of input dropdown combo in the documentation here  search for  Button dropdowns    I leave the original solution for the record and for those who cannot use solution now included in the documentation   Original solution  Yes  it is possible  As a matter of fact  there is one example in the Twitter Bootstrap documentation  follow the link and search  Examples  for dropdown buttons     lt div class  btn-group  gt       lt a class  btn btn-primary  href     gt           lt i class  icon-user icon-white  gt  lt  i gt  User      lt  a gt       lt a class  btn btn-primary dropdown-toggle  data-toggle  dropdown  href     gt           lt span class  caret  gt  lt  span gt       lt  a gt       lt ul class  dropdown-menu  gt           lt li gt  lt a href     gt  lt i class  icon-pencil  gt  lt  i gt  Edit lt  a gt  lt  li gt           lt li gt  lt a href     gt  lt i class  icon-trash  gt  lt  i gt  Delete lt  a gt  lt  li gt           lt li gt  lt a href     gt  lt i class  icon-ban-circle  gt  lt  i gt  Ban lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a href     gt  lt i class  i  gt  lt  i gt  Make admin lt  a gt  lt  li gt       lt  ul gt   lt  div gt    If enclosed within text  it can look like this  with text on the button changed  nothing else      EDIT   If you are trying to achieve  lt input gt  with appended dropdown menu as in the dropdown buttons  then this is one of the solutions    Add a btn-group class to the element that has input-append class  Add elements with classes dropdown-toggle and dropdown-menu at the end of the element with class input-append  Override style for element matching  input-append  btn dropdown-menu so it does not have float  left  otherwise it will get into next line     The resulting code may look like this    lt div class  input-append btn-group  gt       lt input class  span2  id  appendedInputButton  size  16  type  text  gt       lt a class  btn btn-primary dropdown-toggle  data-toggle  dropdown  href     gt           lt span class  caret  gt  lt  span gt       lt  a gt       lt ul class  dropdown-menu  gt           lt li gt  lt a href     gt  lt i class  icon-pencil  gt  lt  i gt  Edit lt  a gt  lt  li gt           lt li gt  lt a href     gt  lt i class  icon-trash  gt  lt  i gt  Delete lt  a gt  lt  li gt           lt li gt  lt a href     gt  lt i class  icon-ban-circle  gt  lt  i gt  Ban lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a href     gt  lt i class  i  gt  lt  i gt  Make admin lt  a gt  lt  li gt       lt  ul gt   lt  div gt    with a little support from this style override    input-append  btn dropdown-toggle       float  none      and give you the exact same result as this     EDIT 2  Updated the CSS selector  was  dropdown-menu  is  dropdown-toggle

[html] Twitter Bootstrap inline input with dropdown

The answer is

Examples related to html

Examples related to twitter-bootstrap

Examples related to textinput

Tags