Searchable, scrollable dropdown button using angularjs and bootstrap

by Shantanu Kulkarni

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="body-container" ng-app="app">
  <div ng-controller="ListCtrl">
    <div 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" ng-change="queryUpdated()" />
    </div>
    <div class="items" ng-hide="isSelected">
      <p class="search-items" ng-click="selectItem(item.name)" ng-repeat='item in items | filter:query track by $index'> {{item.name}}
      </p>
    </div>

  </div>
</div>

CSS

.body-container {
  padding: 5px;
}
.search-items {
    padding-left: 10px;
    padding-bottom: 5px;
    margin: 0 0 0px;
}
.search-items:hover {
  background: #e8e8e8;
  cursor: pointer;
}

.items {
    width: 150px;
    height: 200px;
    overflow: auto;
}

.search-control {
  width: 150px;
}

JavaScript

// Angular

var phonecatApp = angular.module('app', []);

phonecatApp.controller('ListCtrl', function($scope, $timeout) {
  $scope.isSelected = true;
  $scope.items = [{
    'name': 'Item 1'
  }, {
    'name': 'Item 2'
  }, {
    'name': 'Account 3'
  }, {
    'name': 'Account 4'
  }, {
    'name': 'Item 5'
  }, {
    'name': 'Item 6'
  }, {
    'name': 'User 7'
  }, {
    'name': 'User 8'
  }, {
    'name': 'Item 9'
  }, {
    'name': 'Item 10'
  }, {
    'name': 'Item 11'
  }, {
    'name': 'Item 12'
  }, {
    'name': 'Item 13'
  }, {
    'name': 'Item 14'
  }, {
    'name': 'User 15'
  }, {
    'name': 'User 16'
  }, {
    'name': 'Person 17'
  }, {
    'name': 'Person 18'
  }, {
    'name': 'Person 19'
  }, {
    'name': 'Item 20'
  }, ];
  $scope.selectItem = function(selected) {
    $scope.query = selected;
    $timeout(function() {
      $scope.isSelected = true;
    });

  }
  $scope.queryUpdated = function() {
    $scope.isSelected = false;
  }
});