How to highlight Jquery Autocomplete matched word only?

Question

I am using Jquery Autocomplete to search form a list,and it works fine,But all i need to hightlight background of matched word in the list,how can i dot this ?

This is what i have tried so far. fiddle link

     var availableTags = [
     'DHA ABC',
     'DHA BB',
     'DHA CC',
    ];


    $('#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) {
        return $('<div class="element"></div>')
          .data('item.autocomplete', item.label)
          .append('<a href="#">' + item.label + '</a>')
          .appendTo($('#wrapper'));
        break;

        }
      }
     };

Answer 1

I created sample fiddle for your case with key function for highliting

function highlite(label, substring) {
var start = label.toLowerCase().indexOf(substring.toLowerCase());
var end = start + substring.length;
label = label.substr(0, start) +
    '<span class="highlite">' +
    label.substr(start, end - start) +
    '</span>' +
    label.substr(end);
return label;

}

Answer 2

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'));
      }
    }
  };

body {
  font-size: 12px;
}

#wrapper {
  margin-top: 50px;
}

.element {
  border: 1px solid PowderBlue;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

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

fiddle : http://jsfiddle.net/sumeshnu/gwethjq0/

Replace the matched characters from the label with background color using a span tag

Answer 3

very simple you just need to set an attribute to div like below

<div class="element" style="background-color:green; width:30%;"></div>

your code should be something like this.

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) {
        return $('<div class="element" style="background-color:green; width:30%;"></div>')
          .data('item.autocomplete', item.label)
          .append('<a href="javascript:void(0);">' + item.label + '</a>')
          .appendTo($('#wrapper'));
        break;

      }
    }
  };

check this fiddle