CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Ryan Gray
Ryan Gray

Reputation: 3

Drop Down Menu Inside Text Field Bootstrap

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!

Upvotes: 0

Views: 21406

Answers (1)

Ted
Ted

Reputation: 14927

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.

Upvotes: 3

Related Questions