JSFiddle - React, Tailwind, and code Playground

by Sumesh TG

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/sunny/jquery-ui.css">
<label for="tags">Tags:</label>
<input id="tags" />
<div id="wrapper"></div>

CSS

body {
  font-size: 12px;
}

#wrapper {
  margin-top: 50px;
}

.element {
  border: 1px solid PowderBlue;
}

.ui-autocomplete {
  display: none !important;
}

JavaScript

var availableTags = [
  'DHA 11 Rahbar',
  'DHA City',
  'DHA Defence',
  'Dhalloke',
  'Dharampura',
  'DHA 11 Rahbar Phase 1',
  'DHA 11 Rahbar Phase 2',
  'DHA 11 Rahbar Phase 2 Extension',
  'DHA 9 Town',
  'DHA Phase 1',
  'DHA Phase 10',
  'DHA Phase 10',
  'DHA Phase 11 - Halloki Gardens',
  'DHA Phase 2',
  'DHA Phase 3',
  'DHA Phase 4',
  'DHA Phase 5',
  'DHA Phase 6',
  'DHA Phase 7',
  'DHA Phase 8',
  'DHA Phase 9 Prism',
  'DHA - EME Cottages'

];

$('#tags').autocomplete({

    source: availableTags,
    search: function(event, ui) {
      $('#wrapper').empty();
    },
    select: function(e, ui) {
      $(this).val(ui.item.name);
      return false;
    },
  })

  .data('autocomplete')._renderItem = function(ul, item) {
    matchFound = 0;
    var cls = this.options.highlightClass;
    var inp = $("#tags").val().split(" ");
    var template = "<span class='" + cls + "'>$1</span>";
    var items = item.label.split(" ");
    for (var i = 0; i < items.length; i++) {
      for (var j = 0; j < inp.length; j++) {
        index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
        if (index > -1) {
          matchFound += 1;
        }
      }
      if (matchFound == inp.length) {
         var str=item.label;
      str = str.replace(inp[0], '<span style="color: yellow;">'+inp[0]+'</span>');
    console.log(inp);
        return $('<div class="element">'+str+'</div>')
          .data('item.autocomplete', str)
         // .append('<a href="#">' + item.label + '</a>')
          .appendTo($('#wrapper'));

      }
    }
  };