Harugawa Harugawa - 2 months ago 11
Javascript Question

Searching throught data-value on keyup

So, I while I type I need to show elements with certain text that is equals data-value="certain text". I've tried several ways, but nothing seems to work.
Here is what I have so far.

$(".search").keyup(function () {

var filter = $(this).val(), count = 0;
$(".element-holder .element").each(function () {

var current = $('.element').attr('data-name');
if ($(".element[data-name='" + current + "']").text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++;
}
});

});


This is what I need help with ;l

@Edit

HTml here

<div class="element-holder ">
<div class="element" data-name='Adam' id='1'>
</div>
<div class="element" data-name='Eva' id='32'>
</div>
<div class="element" data-name='Sara' id='412'>
</div>
</div>

SCC SCC
Answer

Please try below

$(".search").keyup(function () {

        var filter = $(this).val(), count = 0;
        $(".element-holder .element").each(function () {

            var current = $('.element').attr('data-name');
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
            } else {
                $(this).show();
                count++;
            }
        });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="search"/>
 <div class="element-holder ">
<div class="element" data-name='Adam' id='1'>How to Format
</div>
<div class="element" data-name='Eva' id='32'>How to Edit
</div>
<div class="element" data-name='Sara' id='412'>Searching throught data-value on keyup
</div>
</div>