javascript - 使用 contains() 显示/隐藏 div 内容的页内搜索

Question

我正在尝试向我的常见问题解答页面添加搜索功能，但完全卡住了。

我想要的是一个文本框，用户可以在其中输入关键字(或单词)，该文本框为关键字运行 jquery 并为所有相关答案设置显示: 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(); 
           });

}