JSFiddle - React, Tailwind, and code Playground

by Rajesh Sitaraman

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-app="angularTypeahead">
	<div class="container-fluid" ng-controller="TypeaheadCtrl">
			<input name="states" id="states" type="text" placeholder="enter a state" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
	</div>
</div>

CSS

body {
  max-width: 32em;
  margin: 1em auto 0;
}

JavaScript

var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
// define factory for data source
myApp.factory("States", function(){
  var 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"];  
  return states;  
});
// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope, States) {	
	$scope.selected = undefined;	
	$scope.states = States;	
});