使用 contains() 进行页内搜索以显示/隐藏 div 内容答案

【问题标题】：In-page search using contains() to show/hide div content使用 contains() 进行页内搜索以显示/隐藏 div 内容
【发布时间】：2011-10-06 06:52:50
【问题描述】：

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

我想要的是一个文本框，用户在其中输入一个关键字（或多个词），它为关键字运行 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>

【问题讨论】：

searchTerm的值是多少？
请详细说明为什么这不起作用。

标签： javascript jquery contains

【解决方案1】：

试试这个

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

}

【讨论】：

【解决方案2】：

试试这个。

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

【讨论】：

【解决方案3】：

将 .addStyle("display:block") 更改为 .show()

【讨论】：