如何使用两个搜索框创建下拉列表

Question

我想创建一个下拉列表，其中两个不同的搜索框彼此平行。 如图所示。 [Live example]。我试过搜索并用bootstrap做了一些代码，但无法实现。

是否有提供此类下拉列表的库或ui工具包？或任何其他例子？

Answer 1

<强> HTML

<div class="container row">
    <div class="col-md-9">
        <div class="input-group">
            <input type="text" class="form-control" aria-label="..." id="text1">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span>

                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">Action</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </div>
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span>

                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">Action</a>

                    </li>
                    <li><a href="#">Another action</a>

                    </li>
                    <li><a href="#">Something else here</a>

                    </li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
        <div class="col-md-3">
            <div >
                <button id="mybtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>Search</button>
  </div>
        </div>
</div>

<强> CSS

.btn-default {
    border:0;
}
.input-group {
    border:1px solid darkgrey;
}
#text1 {
    border:none;
}
.container {
    background-color:rgba(0, 0, 0, 0.2);
    margin:10px;
    padding:10px;
}
#mybtn{
    background-color:skyblue;
}

小提琴：Here