我有一个 Angular 项目，它使用了 bootsnipp（Bootstrap snippets）中的 dropdown。我遇到的问题是，这个下拉列表不能与搜索栏一起使用。
//HTML格式

<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span id="search_concept">Search In</span> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#"><i class="fa fa-th" aria-hidden="true"></i> All Category</a></li>
      <li><a href="#"><i class="fa fa-laptop" aria-hidden="true"></i> IT Solutions</a></li>
      <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i> Design and Multimedia</a></li>
      <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i> Social Media and Marketing</a></li>
    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">         
  <input type="text" class="form-control" name="x" placeholder="Enter search keyword here">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
  </span>
</div>

//JS中

ngAfterViewInit(){
  $('.search-panel .dropdown-menu').find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).attr("href").replace("#","");
    var concept = $(this).text();
    $('.search-panel span#search_concept').text(concept);
    $('.input-group #search_param').val(param);
  });
}