使用contains（）进行页内搜索以显示/隐藏div内容 [英] In-page search using contains() to show/hide div content

问题描述

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

I am trying to add a search functionality to my FAQ page and am absolutely stuck.

我想要的是一个用户输入关键字的文本框（或单词），为关键字运行jquery并为所有相关答案设置display：block。

What I want is a text box where the user inputs a keyword(or words), that runs a jquery for the keyword and sets display:block for all the relevant answers.

到目前为止，我所拥有的是：

What I have so far is this:

    <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>

推荐答案

试试这个

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

}

这篇关于使用contains（）进行页内搜索以显示/隐藏div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！