Angular Typeahead

by Harsha Jayamanna

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div ng-app="myApp">
    <div class='container-fluid' ng-controller="TypeaheadCtrl"> <pre>item: {{selected| json}}</pre>

        <input class="input-large" type="text" ng-model="selected" 
        typeahead="item as item.Name for item in items | filter:{Name:$viewValue}"
        typeahead-on-select="onSelect($item, $model, $label)"
        >
    </div>
</div>

CSS

body {
    padding:10px
}

JavaScript

angular.module('myApp', ['ui.bootstrap']);

function TypeaheadCtrl($scope) {

    $scope.selected = undefined;
    $scope.items = [
    {Id: 1, Name: "Innova"},
    {Id: 2, Name: "Ferrari"},
    {Id: 222222, Name: "BMW"},
    {Id: 22222, Name: "Toyota"},
    {Id: 2222, Name: "Honda"},
    {Id: 222, Name: "Hyuindai"},
    {Id: 22, Name: "Kia"},
    {Id: 2, Name: "Suzuki"}
    ];
    
     $scope.onSelect = function ($item, $model, $label) {
          $scope.$item = $item;
          $scope.$model = $model;
          $scope.$label = $label;
          console.log($label);
      };
}