Angular UI Typeahead Sample

Toying around with Angular UI Typeahead

by Ahmad Sharif

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<body ng-app="TypeaheadDemo">
  <script type="text/ng-template" id="customTemplate.html">
    <a>
      <img ng-src="{{match.model.img}}" width="16"> {{match.model.name}}
    </a>
  </script>

  <div class="container-fluid" ng-controller="TypeaheadCtrl">
    <h1>Angular UI Bootstrap Typeahead</h1>
    <input type="text" ng-model="query" class="form-control" typeahead="name as result.name for result in results | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" />
  </div>
</body>

JavaScript

angular.module("TypeaheadDemo", ['ui.bootstrap'])
  .controller('TypeaheadCtrl', ['$scope', function($scope) {
    $scope.query = "";
    $scope.results = [{
      name: "California",
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png"
    }, {
      name: "Delaware",
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png"
    }, {
      name: "Florida",
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png"
    }];
  }]);