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="MdAutocompleteBugApp">
      <div ng-controller="MdAutocompleteBugController as vm">

        <md-toolbar class="md-padding">
          <md-autocomplete md-selected-item="vm.selectedItem" md-search-text="vm.searchText" md-items="item in vm.getSuggestions(vm.searchText)" md-item-text="item" placeholder="Search">
            <md-item-template>
              <span md-highlight-text="vm.searchText" md-highlight-flags="^i">{{item}}</span>
            </md-item-template>
            <md-not-found>
              No matches found.
            </md-not-found>
          </md-autocomplete>
        </md-toolbar>
      </div>
    </div>
  </body>

</html>

CSS

span[md-highlight-text] .highlight {
  color: #212121;
  font-weight: bolder;
}

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('MdAutocompleteBugApp', ['ngMaterial'])
  .controller('MdAutocompleteBugController', function($scope, $q, $timeout) {
    this.items = [];
    this.getSuggestions = function(searchText) {
      console.log("get Suggestions", searchText);
      return getSuggestions(searchText).then(function(res) {
        for (var i = 0; i < res.length; i++) {
          res[i] += " ";
        }
        console.log(res);
        return res;
      });
    }
  });