JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.js"></script>
<script src="https://hakib.github.io/MassAutocomplete/massautocomplete.js"></script>
<link rel="stylesheet" href="https://hakib.github.io/MassAutocomplete/massautocomplete.theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body ng-app=app>
  <div ng-controller=mainCtrl>
    <div mass-autocomplete>
      <input ng-model="dirty.value" class="form-control" mass-autocomplete-item="autocomplete_options">
    </div><br/>
    <div class="row">
      <div class="col-xs-8 text-center"><span class="text-danger validate"><b>test</b></span></div>
      <div class="col-xs-4">
        <button class="btn btn-primary btn-sm"  ng-click="save()" ng-disabled="!dirty.value">Save</button>
      </div>
    </div>
  </div>
</body>

JavaScript

var app = angular.module('app', ['ngSanitize', 'MassAutoComplete']);
app.controller('mainCtrl', function($scope, $sce, $q) {
  $scope.dirty = {};

  var states = ['Alabama', 'Alaska', 'California'];

$scope.save= function () {
alert($scope.dirty.value);
};

  function suggest_state(term) {
    var q = term.toLowerCase().trim();
    var results = [];

    // Find first 10 states that start with `term`.
    for (var i = 0; i < states.length && results.length < 10; i++) {
      var state = states[i];
      if (state.toLowerCase().indexOf(q) === 0)
        results.push({
          label: state,
          value: state
        });
    }

    return results;
  }

  $scope.autocomplete_options = {
    suggest: suggest_state
  };
});