I want to display my drop down menu inside my text input field using bootstrap:

<script type="text/javascript">
    $(document).ready(function(e) {
        $('.selectpicker').selectpicker();
        $('div.cow').scrollyou();
        $("select").selectBoxIt();
    });
</script>

<form action="#" method="post" class="form-inline">
    <div class="input-append">
        <input type="text" class="form-control input-lg" name="domain" size="40" value="Search"/>
        <select name="tld[]" class="selectpicker scrollMe" data-size="5" data-live-search="true" multiple data-selected-text-format="values" multiple title='Select Option' data-style="btn-primary" data-width="15%">
            <div class="cow">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
                <option>Four</option>
                <option>Five</option>
                <option>Six</option>
            </optgroup>
            </div>
        </select>
        <button class="btn btn-lg btn-inverse" type="submit" value="Search" />
            <i class="fa fa-search"></i>
        </button>
    </form>
</div>

As you can see, I'm using Bootstrap-select and scrollYou for some of the functionality.

But how can I get my select field (and options) to display inside the search box?

Any help is much appreciated!

I want to display my drop down menu inside my text input field using bootstrap:

<script type="text/javascript">
    $(document).ready(function(e) {
        $('.selectpicker').selectpicker();
        $('div.cow').scrollyou();
        $("select").selectBoxIt();
    });
</script>

<form action="#" method="post" class="form-inline">
    <div class="input-append">
        <input type="text" class="form-control input-lg" name="domain" size="40" value="Search"/>
        <select name="tld[]" class="selectpicker scrollMe" data-size="5" data-live-search="true" multiple data-selected-text-format="values" multiple title='Select Option' data-style="btn-primary" data-width="15%">
            <div class="cow">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
                <option>Four</option>
                <option>Five</option>
                <option>Six</option>
            </optgroup>
            </div>
        </select>
        <button class="btn btn-lg btn-inverse" type="submit" value="Search" />
            <i class="fa fa-search"></i>
        </button>
    </form>
</div>

As you can see, I'm using Bootstrap-select and scrollYou for some of the functionality.

But how can I get my select field (and options) to display inside the search box?

Any help is much appreciated!

• javascript
• jquery
• html
• css
• twitter-bootstrap

• You have some serious problems in your HTML (such as a <div> placed inside a <select>). Try to sort those out first. – hon2a Commented Dec 12, 2014 at 17:30
• </optgroup> is a standalone tag (you don't open it anywhere) and it's not even a valid tag – Sterling Archer Commented Dec 12, 2014 at 17:36
• I would avoid scrollYou at all cost. It has many bugs and doesn't work properly on many browser builds. – Joe Swindell Commented Dec 12, 2014 at 17:38

1 Answer 1

This is the bootstrap way:

Input Groups with Dropdowns

And with a button on the right:

<div class="input-group">
  <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" 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 -->
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div><!-- /input-group -->

As has been pointed out, you've got some real problems with the html you've written. Use the snippets from bootstrap and you should be good to go.