contains（）を使用してdivコンテンツを表示/非表示にするページ内検索

Question

私のFAQページに検索機能を追加しようとしています。

私が欲しいのは、ユーザーがキーワードを入力し、そのキーワードに対してjqueryを実行し、関連するすべての回答のdisplay：blockを設定するテキストボックスです。

私はこれまででてきた何

：

<form name="searchBox"> 
     Keyword(s): <input type="text" name="keyword" /> 
     <input type="button" value="Search" onClick="searchFunction()" /> 
    </form> 
    <div class="searchable" style="display:none"> 
     This is the first software question and answer.</div> 
    <div class="searchable" style="display:none"> 
     This is the first hardware question and answer.</div> 
    <script type="text/javascript"> 
     function searchFunction() { 
      var searchTerm = document.searchBox.keyword.value; 
      $(" :contains('"+searchTerm+"')").addStyle("display:block"); } 
    </script> 

Answer 1

この

function searchFunction() { 
      var searchTerm = document.searchBox.keyword.value; 
      $(".searchable").each(function(){ 
       $(this).(":contains('"+searchTerm+"')").show(); 
      }); 

} 

Answer 2

変更.addStyle（ "表示：ブロック"）（.SHOWへ）

Answer 3

を試してみて、これを試してみてください。

function searchFunction() { 
    $(".searchable") 
     .hide() 
     .filter(":contains('" + $("input[name='keyword']").val() + "')") 
     .show(); 
}