Angular Bootstrap Typeahead

Example of the static version only.

by elenat82

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
<h4>How to prevent user from typing the whole word ignoring suggestions?</h4>
<div>Model: 
<pre>{{chooseStateForm | json}}</pre>
</div>
    <form role="form" name="chooseStateForm" autocomplete="off" novalidate>
        <div class="form-group required">
            <div>
                <label for="state" class="control-label col-sm-3">Choose a State:</label>
                    <input type="text" 
                            class="form-control" 
                            required 
                            placeholder="Try typing the whole name of the state ignoring suggestion" 
                            name="state" 
                            ng-model="selected" 
                            uib-typeahead="option as option.name for option in states | filter:{name: $viewValue}" 
                            typeahead-min-length="1" 
                            typeahead-no-results="noresults" 
                            typeahead-show-hint="true" 
                            object
                            >
            </div>
            <div ng-if="noresults">
            <p>No match found!</p>
            </div>
        </div>
    </form>
    <br><br><br><br>
    <div>
        <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()" ng-disabled="chooseStateForm.$invalid">OK</button>
        <button class="btn btn-primary" type="button" ng-click="$ctrl.cancel()">Cancel</button>
    </div>
</div>

JavaScript

angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('TypeaheadCtrl', function($scope) {

  $scope.selected = undefined;
  $scope.states = [
  {id: 1, name: 'Alabama'},  
  {id: 2, name: 'California'}, 
  {id: 3, name: 'Delaware'}, 
  {id: 4, name: 'Florida'}, 
  {id: 5, name: 'Georgia'}, 
  {id: 6, name: 'Hawaii'}, 
  {id: 7, name: 'Idaho'},  
  {id: 8, name: 'Kansas'}, 
  {id: 9, name: 'Louisiana'}, 
  {id: 10, name: 'Maine'}, 
  {id: 11, name: 'Nebraska'}, 
  {id: 12, name: 'Ohio'}, 
  {id: 13, name: 'Pennsylvania'}, 
  {id: 14, name: 'Rhode Island'}, 
  {id: 15, name: 'South Carolina'}, 
  {id: 16, name: 'Tennessee'},
  {id: 17, name: 'Utah'}, 
  {id: 18, name: 'Vermont'}, 
  {id: 19, name: 'Washington'}
];
});

app.directive('object', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.object = function(modelValue, viewValue) {
        if (ctrl.$isObject(modelValue)) {
          return true;
        }
        else {
        	return false;
        }

        
      };
    }
  };
});