JSFiddle - React, Tailwind, and code Playground

by Aravind23

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
<!-- Included here because the External Resources panel is annoying to use -->
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>
  </head>

  <body>
    <div ng-app="myApp">
      <div ng-controller="autoSuggestCtrl">
        <md-toolbar class="md-padding">
          <input type="text" id="searchInput" ng-change="getSuggestions()" ng-model="input" list="dataList" placeholder="Search" />

          <datalist id="dataList">
        <option ng-repeat="item in list" value="{{item}}">
      </datalist>
        </md-toolbar>
        {{list}}
      </div>

    </div>
  </body>

</html>

CSS

input {
  width: 100%;
  padding: 5px 15px;
  border-radius: 3px;
  font-size: 16px;
}
datalist option {
  width: cal(100% - 10px);
}

JavaScript

// ================================= Mock Server Start =============================
var FAILURE_COEFF = 10;
var MAX_SERVER_LATENCY = 200;

function getRandomBool(n) {
  var maxRandomCoeff = 1000;
  if (n > maxRandomCoeff) n = maxRandomCoeff;
  return Math.floor(Math.random() * maxRandomCoeff) % n === 0;
}

function getSuggestions(text) {
  var pre = 'pre';
  var post = 'post';
  var results = [];
  if (getRandomBool(2)) {
    results.push(pre + text);
  }
  if (getRandomBool(2)) {
    results.push(text);
  }
  if (getRandomBool(2)) {
    results.push(text + post);
  }
  if (getRandomBool(2)) {
    results.push(pre + text + post);
  }
  return new Promise((resolve, reject) => {
    var randomTimeout = Math.random() * MAX_SERVER_LATENCY;
    setTimeout(() => {
      if (getRandomBool(FAILURE_COEFF)) {
        reject();
      } else {
        resolve(results);
      }
    }, randomTimeout);
  });
}
// ================================= Mock Server End =============================



angular
  .module('myApp', ['ngMaterial'])
  .controller('autoSuggestCtrl', function($scope, $q, $timeout) {
    $scope.list = ['aravind', 'naik'];
    /* setTimeout(() => this.list = ['korra'], 100) */

    $scope.getSuggestions = function() {
      getSuggestions($scope.input).then(function(res) {
        for (var i = 0; i < res.length; i++) {
          res[i] += " ";
        }
        $scope.list = res;
        console.log($scope.list, res);
      });
    }
  });