jQueryの文字検索

Question

私は、テキストボックスと文字列を持っている文字列

に限定された文字の背景色を変更したい、私はjqueryの などを使用して、テキストボックス
から文字列の背景色を変更したいです：

私は私がすべての「文字」を変更する必要があるテキストボックスにテキスト「文字」を入力し、「CHAR」のテキストは、UL

<ul class="brows_all_cat"> 

<li><a> My sample character1 </a></li> 
<li><a> My sample CHARACTER2 </a></li> 
<li><a> My sample character3 </a></li> 
<li><a> My sample character4 </a></li> 
</ul> 

Answer 1

を記載されている私はあなたが.contains()セレクタを意味すると思いますが、特にmaking it case-INsensitive

//make :contains() case insensitive 
jQuery.expr[':'].Contains = function(a, i, m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
}; 

//then 

var elementsThatHaveText = $('.brows_all_cat a:contains("'+text_you_need+'")'); 

Answer 2

1. 入力されたフレーズ格納する変数を作成します。

   するvar単語を= '';

2. は、イベントハンドラに

   $（文書）.on（ 'キープレス'、ハイライト）を書きます。次いでフレーズをラップすることによって、hightlightsを追加し、すべての<a>要素から

   word += String.fromCharCode(event.which); 
   

3. エキスのinnerText：フレーズするために押されたキーを追加します

   function highlight(event) { 
       // ... 
   } 
   

   1. ：

   2. 今hightlight機能を実装<span>要素

      $('li>a').each(function() { 
          var element = $(this); 
          var text = element.text(); 
          text = text.replace(new RegExp('(' + word + ')', 'ig'), '<span class="highlight">$1</span>'); 
          element.html(text); 
      }); 
      

4. .highlightセレクタにスタイルを追加します。

   var word = ''; 
   
   function highlight(event) { 
       word += String.fromCharCode(event.which); 
       $('li>a').each(function() { 
        var element = $(this); 
        var text = element.text(); 
        text = text.replace(new RegExp('(' + word + ')', 'ig'), '<span class="highlight">$1</span>'); 
        element.html(text); 
       }); 
   } 
   
   $(document).on('keypress', 'highlight'); 
   

   左に一つの問題がまだある：、それは以下のようにする必要があり、すべてのコードを組み合わせることにより

   <style> 
       span.highlight { 
        color: red; 
       } 
   </style> 
   

フレーズがクリアされるとき、特定の時間が経過した後にその文書がキー押下イベントを受信しなかった場合、または他の戦略？