Как создать выпадающий список с двумя поисковыми ящиками

Question

Я хочу создать выпадающее меню с двумя разными поисковыми ящиками, параллельными друг другу. как показано на изображениях. [Live example]. Я попытался выполнить поиск и сделал код с бутстрапом, но не смог его достичь.

Есть ли библиотека или пользовательский интерфейс инструментов, который обеспечивает такое выпадающее меню? или любой другой пример?

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; 
} 

Fiddle: Here