CODEWITHSUNDEEP
javascriptjqueryhtml
tom bobby
tom bobby

Reputation: 59

Search html elements by phrase

There is a simply html view:

<html>
<head>
</head>
<body>
<input id="summaryText" type="text" name="Summary" placeholder="Summary"><br>
<input id="groupText" type="text" name="Groups" placeholder="Groups"><br>
<input id="searchButton" type="button" value="Search"><br>
<table>
    <tr>
        <details>
            <summary><b>First Summary</b></summary>
            <ul>
                <details>
                    <summary><b>Groups</b></summary>
                    <ul>
                        <li>group A of First</li>
                        <li>group B of First</li>
                    </ul>
                </details>
                <details>
                    <summary><b>People</b></summary>
                    <ul>
                        <li>John</li>
                        <li>Mark</li>
                    </ul>
                </details>
            </ul>
        </details>
    </tr>
    <tr>    
        <details>
            <summary><b>Second Summary</b></summary>
            <ul>
                <details>
                    <summary><b>Groups</b></summary>
                    <ul>
                        <li>group A of Second</li>
                        <li>group B of Second</li>
                        <li>group C of Second</li>
                    </ul>
                </details>
                <details>
                    <summary><b>People</b></summary>
                    <ul>
                        <li>Alex</li>
                    </ul>
                </details>
            </ul>
        </details>
    </tr>
</table>
</body> 
</html>

I want to use summaryText and groupText to filter elements from page. It could be just something like display:none.

The first input summaryText should works as normal filter. It means that if main summary (from first details in every tr element) consists String from summaryText - it should be display for user (all elements from this tr), if doesn't consist - it should be hide for user (all elements from this tr).

The Second input should filter by String in li elements from details with summary Groups. If there is any li with String from groupText - all elements from this tr should be display and if doesnt - should be hide for user.

Is there any way to search for details element by summary and then get parent tr and show/hide it or just use any else solution?

Upvotes: 0

Views: 84

Answers (2)

PotatoManager
PotatoManager

Reputation: 1775

Use the following to get an array of all the elements belonging to a particular tag:

var array=document.getElementsByTagName("summary");

Iterate this array using a simple for loop and search for a string inside that tag.

for(i=0;i<array.length;i++){
   if(array[i].innerHTML.indexOf("word to search for") !== -1){
      //do something here
    }
}

Upvotes: 0

Nir Tzezana
Nir Tzezana

Reputation: 2342

You could use this logic: 

$("*:not(body)").each(function() {
  if ($(this).html().indexOf("your phrase")>-1)
    // String is found, your code here
});

Upvotes: 1

Related Questions