JSFiddle - React, Tailwind, and code Playground

by jnthnjns_

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<div data-ng-app="myApp" ng-controller="TypeaheadCtrl">
 <pre>Model: {{selectedValue | json}}</pre>
    <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="getSelected(selected); selected = '';" />
</div>

CSS

* {
    outline: none;
    box-sizing: border-box;
}

ul.dropdown-menu {
    padding: 0;
    margin: 10px 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
ul.dropdown-menu > li {
    padding: 6px;
    margin: 0;
    cursor: pointer;
}
ul.dropdown-menu > li:hover, ul.dropdown-menu > li.active {
    color: #f3f3f3;
    background-color: #666;
}
input {
    padding: 4px 6px;
}

JavaScript

angular.module('myApp', ['ui.bootstrap'])
    .controller('TypeaheadCtrl', function ($scope) {
        $scope.selectedValue = [];
        $scope.getSelected = function (value) {
            if ($scope.selectedValue.indexOf(value) < 0) {
                $scope.selectedValue.push(value);
            }
        };
    $scope.selected = undefined;
    $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'];
});