autocomplete example using array

by mridulpv

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container">
    <div ng-controller="mainCtrl" class="row-fluid">
        <form class="row-fluid">
            <div class="container-fluid">
                 <br/> 
                <blockquote>
                  State: {{selectedState}}<br/>                  
                </blockquote>
                
                Select States: <input type="text" ng-model="selectedState" typeahead="state for state in states | filter:$viewValue" />
                <br/>
                
                <blockquote>
                  ID: {{selectedUser.id}}<br/>
                  Name: {{selectedUser.name + ' ' + selected.last}}<br/>
                  Age: {{selectedUser.age}}<br/>
                  Gender: {{selectedUser.gender}}
                </blockquote>
                
                Select User: <input type="text" ng-model="selectedUser" typeahead="user as (user.first + ' ' + user.last) for user in users | filter:$viewValue" />
                
                <br/>
                
                <blockquote>
                  CODE: {{selectedCountry.code}}<br/>                  
                  NAME: {{selectedCountry.name}}<br/>                  
                </blockquote>
                Select Country: <input type="text" ng-model="selectedCountry" typeahead="country as (country.name ) for country in countryCodesToCountryNames | filter:$viewValue" />
            </div>
        </form>
    </div>
</div>

JavaScript

angular.module('myApp', ['ui.bootstrap'])
    .controller("mainCtrl", function ($scope) {
    $scope.selectedState = '';
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
        
    $scope.selectedUser = '';
    $scope.users = [
    {'id': 1, 'first': 'John', 'last': 'Depp', 'age':52, 'gender':'male'}, 
    {'id': 2, 'first': 'Sally', 'last': 'JoHanson', 'age':13, 'gender':'female'},
    {'id': 3, 'first': 'Taylor', 'last': 'Swift', 'age':22, 'gender':'female'},
    {'id': 4, 'first': 'Max', 'last': 'Payne', 'age':72, 'gender':'male'},
    {'id': 5, 'first': 'Jessica', 'last': 'Hutton', 'age':12, 'gender':'female'},
    {'id': 6, 'first': 'Nicholas', 'last': 'Cage','age':3, 'gender':'male'},
    {'id': 7, 'first': 'Lisa', 'last': 'Simpson', 'age':18, 'gender':'female'}
  ];
        
     $scope.selectedCountry = '';
     $scope.countryCodesToCountryNames = [
         {'code':'AD', 'name': 'Andorra'},
         {'code':'BZ', 'name': 'Belize'},
         {'code':'CA', 'name': 'Canada'}];
});