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">
<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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 ng-app="myApp">
        <div ng-controller="autoSuggestCtrl">
            <md-toolbar class="md-padding">
                <div class="autocomplete">
                    <input id="myInput" type="text" ng-model="inputSearch" ng-change="searchChange()" placeholder="Search">
                </div>
            </md-toolbar>
            <img src="https://nqousmug9v-flywheel.netdna-ssl.com/wp-content/uploads/2017/10/newTS-logo-on-white-bg-forrester.png" />
        </div>
    </body>

</html>

CSS

* {
    box-sizing: border-box;
}

body {
    font: 16px Arial;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
    color: black;
    border-radius: 3px;
}

input[type=text] {
    background-color: #f1f1f1;
    width: 100%;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    font-size: 16px;
    color: black;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: dodgerBlue !important;
    color: #ffffff;
}

img {
    width: 100%;
    padding: 50px;
}

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) {
        var arr = [],
            val = "",
            currentFocus;
        // inputEle defines our search input box
        var inputEle = document.getElementById('myInput');

        /*getItems function is used to make a call for getSuggestions*/
        function getItems() {
            val = $scope.inputSearch;
            console.log($scope.inputSearch);
            getSuggestions($scope.inputSearch).then(function(res) {
                arr = res;
                /*close any already open lists of autocompleted values*/
                closeAllLists();
                currentFocus = -1;
                /* call openAllLists function */
                openAllLists(val);
            });
        }

        /* searchChange is an ng-change function for input field */
       ...