javascript - In-page search using contains() to showhide div content - Stack Overflow

admin管理员组

文章数量:1287811

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

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>

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

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>

• javascript
• jquery
• contains

Share Improve this question Follow asked Jul 15, 2011 at 15:47 FrazzleSnazzleFrazzleSnazzle 4311 silver badge33 bronze badges 2

• What is the value of searchTerm? – George Cummins Commented Jul 15, 2011 at 15:49
• Please elaborate on why this isn't working. – a'r Commented Jul 15, 2011 at 15:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Try this

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

}

Try this.

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

Change .addStyle("display:block") to .show()

本文标签： javascriptInpage search using contains() to showhide div contentStack Overflow