Vfrdtyky

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