Dfyjkt

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;

 
 
 ;

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;

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

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