javascript - Auto highlighting part of word -

i'm trying build "search in shown elements" function jquery , css. here's got far:

http://jsfiddle.net/jonigiuro/wtjzc/

now need add little feature , don't know start. basically, when write in search field, corresponding letters should highlighted in list (see screenshot, blue highlighted part)

here's script far:

var filterparticipants = function(options) {     this.options = options;     this.participantlist = [];      this.init = function() {          var self = this;         //generate participants opbject         for(var = 0; < this.options.participantbox.length ; i++) {             this.participantlist.push({                 element: this.options.participantbox.eq(i),                 name: this.options.participantbox.eq(i).find('.name').text().tolowercase()             })         }         //add event listener         this.options.searchfield.on('keyup', function() {             self.filter($(this).val());          })     }      this.filter = function( string ) {         var list = this.participantlist;         for(var = 0 ; < this.participantlist.length; i++) {             var currentitem = list[i];             //compare input participants object (name)             if( currentitem.name.indexof(string.tolowercase()) == -1) {                  currentitem.element.addclass('hidden');              } else {                  currentitem.element.removeclass('hidden');              }          }     }      this.init(); }  var filterparticipants = new filterparticipants({     searchfield: $('#participants-field'),     participantbox: $('.single_participant'),     nameclass: 'name' }); 

i think you're complicating things much... can in few lines. hope helps:

var $search = $('#participants-field'); var $names = $('.single_participant p');  $search.keyup(function(){   var match = regexp(this.value, 'gi'); // case-insensitive   $names     .hide()     .filter(function(){ return match.test($(this).text()) })     .show()     .html(function(){       if (!$search.val()) return $(this).text();       return $(this).text().replace(match, '<span class="highlight">$&</span>');     }); }); 

i used hide , show because feels snappier can use css3 animations , classes doing.

demo: http://jsfiddle.net/elclanrs/wtjzc/8/