保持搜索固定在下拉菜单中

Question

我在角度JS中创建了一个带搜索选项的下拉菜单。当我点击它时，会出现带有搜索选项的下拉菜单。但是当我向下滚动时，搜索也成为滚动的一部分。我希望它被修复并放置在我点击的位置。

以下是下拉菜单的代码。

<div class="dropdown dropdown-scroll" style="margin-top:15px;" >

<button style="width:220px;" class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
   {selected.ApplicationName}}
</button>
<ul class="dropdown-menu" role="menu">
      <li role="presentation">
            <div class="input-group input-group-sm search-control" fixed>
                 <span class="input-group-addon">
                       <span class="glyphicon glyphicon-search"></span>
                  </span>
                  <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
            </div>
      </li>

      <li  role="presentation" ng-repeat='app in applicationArray | filter:query'>
           <a ng-click="changeSelected(app)"> {{app.ApplicationName}} </a>
      </li>


</ul>
</div>

输出如下：

现在我滚动，这个搜索上升，我再也看不到了。此外，当我点击*选择一个应用程序时，我希望下拉列表放在*选择一个应用程序的位置。

试试这个小提琴 HTTP：// jsfiddle.net/kyrcha/ULSy3/6/

Answer 1

尝试这个

使用 navbar-fixed-top 类进行搜索 li

<li role="presentation" class="navbar-fixed-top">
            <div class="input-group input-group-sm search-control" fixed>
                 <span class="input-group-addon">
                       <span class="glyphicon glyphicon-search"></span>
                  </span>
                  <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
            </div>
      </li>

编辑代码：

我已更新fiddle。请检查一下。

HTML：

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1 "  ng-controller="ListCtrl">
          <li><div class=" fixed-class input-group input-group-sm search-control "> <span class="input-group-addon ">
                    <span class="glyphicon glyphicon-search"></span>
</span>
                <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
            </div>
        </li>
         <ul class="presentation-li">
        <li role="presentation" ng-repeat='item in items | filter:query'> <a href="#"> {{item.name}} </a>
             </li>
        </ul>



    </ul>

CSS：

ul.presentation-li li{
    list-style: none;    
}
ul.presentation-li li a{
    color: black;
    text-decoration: none;
}

.fixed-class{
    position: fixed;
    border-width: 0 0 1px;
    width : 141px;
    top: 37px;
    bottom : 35px;
    background-color: white;

}