CODEWITHSUNDEEP
jqueryhtmlfilter
user1063287
user1063287

Reputation: 10869

how to perform jQuery live filter on divs and not list items?

I think the feature i am looking for is called 'live filter' and i am trying to filter outputted database entries where each entry has the following structure:

<div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
    <img src="path/to/image.jpg">
    <div class="class4">
        <h4>some text here</h4> <!-- this is what i want to search in -->
        <div class="class5">
            <span id="date">date: MM/DD/YY</span>
            <span id="id_one">text</span>
        </div>
        <div class="class6">
            <span id="id_two">text</span>
            <span id="id_three">text</span>
        </div>
        <span id="id_four">text</span>
        <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
    </div>
</div>

I am wanting to search within .class4 h4 and then fade out all .class1 divs that do not contain the searched for text.

This is the default behaviour of the solutions I have come across (mainly here) however they seem to only function with list items and not divs. for example, i tried the code from here and modified it to:

<script>
    $(document).ready(function() {
        $("#filter").keyup(function() {
            // Retrieve the input field text and reset the count to zero
            var filter = $(this).val(), count = 0;

            // Loop through the comment list
            $(".class4 h4").each(function() {
                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(".class1").fadeOut();
                    // Show the list item if the phrase matches and increase the count by 1
                } 
                else {
                    $(this).show();
                    count++;
                }
            });

            // Update the count
            var numberItems = count;
            $("#filter-count").text("# of matches = "+count);
        });
    });
</script>

and it searched correctly but it hid all the divs with .class1.

does anyone know how a live filter could be used to search .class4 h4 for specific text and then fade out div's with .class1 that do not contain the text searched for?

Thank you.

Upvotes: 0

Views: 4853

Answers (2)

Demian Flavius
Demian Flavius

Reputation: 795

As I told you, I got back with the live demo. Here is the code:

***Just make sure you include the jquery script.

<label>Type here</label>

<input type="text" id="filter" onkeyup=" return callfunction(); " />

<div>
    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>abcdef</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>some</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>dcdef</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>dcfffff</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

    <div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
        <img  src="@Url.Content("~/StaticContent/Images/cycling_logo.gif")" width="90" height="90">
        <div class="class4">
            <h4>dssfafafsa</h4> <!-- this is what i want to search in -->
            <div class="class5">
                <span id="date">date: MM/DD/YY</span>
                <span id="id_one">text</span>
            </div>
            <div class="class6">
                <span id="id_two">text</span>
                <span id="id_three">text</span>
            </div>
            <span id="id_four">text</span>
            <span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
        </div>
    </div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script>
<script type="text/javascript">
    function callfunction() {
        $(".class4 h4").each(function() {
            if ($(this).text().indexOf($("#filter").val()) != 0) {
                $(this).parent().parent().fadeOut(500);
            } else {
                $(this).parent().parent().fadeIn(500);
            }
        });
    }
</script>

Upvotes: 1

Demian Flavius
Demian Flavius

Reputation: 795

use onkeypress

ex: 

 <input type="text" onkeypress=" return callfunction(event); "

In the callfunction you can then implement the fade out logic.

call function should look like this: 

function callfunction(event){   
// Loop through the comment list
            $(".class4 h4").each(function() {
                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(".class1").fadeOut();
                    // Show the list item if the phrase matches and increase the count by 1
                } 
                else {
                    $(this).show();
                    count++;
                }
            });

            // Update the count
            var numberItems = count;
            $("#filter-count").text("# of matches = "+count);}          
}

And there is not need for the function to be in the document ready method

Upvotes: 1

Related Questions