I'm looking to integrate a dropdown menu within my text input field with the help of 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>Currently, I have incorporated Bootstrap-select and scrollYou into the setup.
Is there a way for me to nest my select field (including options) inside the search box itself?
Your assistance on this matter would be greatly appreciated!