自動高亮字

Question

的一部分，我試圖建立與jQuery和CSS一「中所示的元素搜索」功能。 這是我走到這一步：

http://jsfiddle.net/jonigiuro/wTjzc/

現在我需要添加一個小功能，我不知道從哪裏開始。基本上，當你在搜索欄中寫的東西，相應的字母應該在列表中突出顯示（見截圖，藍色顯示的部分）

這裏是迄今爲止腳本：

var FilterParticipants = function(options) { 
    this.options = options; 
    this.participantList = []; 

    this.init = function() { 

     var self = this; 
     //GENERATE PARTICIPANTS OPBJECT 
     for(var i = 0; i < 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 i = 0 ; i < this.participantList.length; i++) { 
      var currentItem = list[i]; 
      //COMPARE THE INPUT WITH THE 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' 
}); 

Answer 1

這裏是使用jQuery自動完成的方式so question
如果您想自己構建它，您可以執行以下操作：
1.獲取每個項目的數據。
2.進行渲染功能，您將在替代說「杉」在火字火
3.您更改輸入你可以通過該項目，並進行替換文本每次。

Answer 2

我覺得你只是複雜的事情太多了...你可以在幾行很容易做到這一點。希望這有助於：

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

我用hide和show，因爲它感覺迅捷，但你可以使用CSS3動畫和類像你在幹什麼。

演示：http://jsfiddle.net/elclanrs/wTjzc/8/