JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="input-field col s12">
    <label class="active">State</label>
    <input type="text" id="autocompleteState" class="autocomplete inputFields">

  </div>
</div>


<script>
  var stateData = [{
    value: "Alabama"
  }, {
    value: "Alaska"
  }, {
    value: "Arizona"
  }, {
    value: "Arkansas"
  }, {
    value: "California"
  }, {
    value: "Colorado"
  }, {
    value: "Connecticut"
  }, {
    value: "District of Columbia"
  }, {
    value: "Delaware"
  }, {
    value: "Florida"
  }, {
    value: "Georgia"
  }, {
    value: "Hawaii"
  }, {
    value: "Idaho"
  }, {
    value: "Illinois"
  }, {
    value: "Indiana"
  }, {
    value: "Iowa"
  }, {
    value: "Kansas"
  }, {
    value: "Kentucky"
  }, {
    value: "Louisiana"
  }, {
    value: "Maine"
  }, ];

  $('#autocompleteState').data('array', stateData);

</script>

<!-- end snippet -->

CSS

.autocomplete-content {
      position: absolute;
      background: #383838;
      margin-top: -.9rem;
    }
    
    .autocomplete-content li {
      clear: both;
      color: rgba(0, 0, 0, 0.87);
      cursor: pointer;
      line-height: 0;
      width: 100%;
      text-align: left;
      text-transform: none;
      padding: 10px;
    }
    
    .autocomplete-content li > span {
      color: #ffa726;
      font-size: .9rem;
      padding: 1.2rem;
      display: block;
    }
    
    .autocomplete-content li > span .highlight {
      color: #000000;
    }
    
    .autocomplete-content li img {
      height: 52px;
      width: 52px;
      padding: 5px;
      margin: 0 15px;
    }
    
    .autocomplete-content li:hover {
      background: #eee;
      cursor: pointer;
    }
    
    .autocomplete-content > li:hover {
      background: #292929;
    }

JavaScript

$('document').ready(function() {

      var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';


      /**************************
       * Auto complete plugin  *
       *************************/


      $(input_selector).each(function() {
        var $input = $(this);

        if ($input.hasClass('autocomplete')) {

          var $array = $input.data('array'),
            $inputDiv = $input.closest('.input-field'); // Div to append on
          // Check if "data-array" isn't empty
          if ($array !== '') {
            // Create html element
            var $html = '<ul class="autocomplete-content hide">';

            for (var i = 0; i < $array.length; i++) {
              // If path and class aren't empty add image to auto complete else create normal element
              if ($array[i]['path'] !== '' && $array[i]['path'] !== undefined && $array[i]['path'] !== null && $array[i]['class'] !== undefined && $array[i]['class'] !== '') {
                $html += '<li class="autocomplete-option"><img src="' + $array[i]['path'] + '" class="' + $array[i]['class'] + '"><span>' + $array[i]['value'] + '</span></li>';
              } else {
                $html += '<li class="autocomplete-option"><span>' + $array[i]['value'] + '</span></li>';
              }
            }

            $html += '</ul>';
            $inputDiv.append($html); // Set ul in body
            // End create html element

            function highlight(string) {
              $('.autocomplete-content li').each(function() {
                var matchStart = $(this).text().toLowerCase().indexOf("" + string.toLowerCase() + ""),
                  matchEnd = matchStart + string.length - 1,
                  beforeMatch = $(this).text().slice(0, matchStart),
                  matchText = $(this).text().slice(matchStart, matchEnd + 1),
                  afterMatch =...