Searching throught data-value on keyup

Question

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>

@Rayon It is data-name, I just forgot to change it for better example, sorry @_ @. Fixed. — Harugawa, Sep 10 '16 at 08:33
I don't really want to be _rude_ but what id `'somedatahere'` and `'someid'` ? ID must be unique... If you are expecting someone to put efforts for answer, you must express your efforts in your question..... — Rayon, Sep 10 '16 at 08:35
@Rayon Forgive me, I thought it was obvious enough that there is some random data out there. Fixed again. — Harugawa, Sep 10 '16 at 08:37

score 3 · Accepted Answer · answered Sep 10 '16 at 08:56

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>

score 0 · Answer 2 · answered Sep 10 '16 at 08:41

0

Lot of mistakes in your html .

spelling mistakes of element class used.

You did not show the search input html.

Different data attribute name.

If you are using each and make use of $(this) to select current element

Checkout my below demo

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

    var entered = $(this).val();

    $(".elemnet").each(function () {
       var text = $(this).html();

       if(entered !="")
       {
          if(text.indexOf(entered) > -1)
          {

            $(this).show();
          }else
          {

             $(this).hide();
          }
        }else{

          $(".elemnet").hide();
        }
    });

});

Working Demo

Demo using data attribute

answered Sep 10 '16 at 08:41

Amar Singh

5,464
2
26
55

Well, yeah. I agree, I was kinda of in hurry changing names of data-name and classes and then in the end it made no sense at all q_ q. Also data-name is suppose to have different values. I also checked your demo, but nothing seems to works on keyup @_ @. I added jquery to external resources tho. – Harugawa Sep 10 '16 at 08:47
@Harugawa : did you really check my demo ? type a or b or c . See my data attribute value its aaaa , bbbb , ccccc . So type any of these a, b or c – Amar Singh Sep 10 '16 at 08:49
Yeah, this is exactly what I have typed down. – Harugawa Sep 10 '16 at 08:51
Seems, to work in my own code, but not on the website, weird. Do you know only how to make so it would ignore if I either write it A or a? – Harugawa Sep 10 '16 at 08:55
yes you can use `toLowerCase();` to both data attribute value and entered value, it will change to lowercase and then you can filter . More info on it see http://stackoverflow.com/questions/619621/how-do-i-use-jquery-to-ignore-case-when-selecting – Amar Singh Sep 10 '16 at 09:01

score 0 · Answer 3 · edited Sep 10 '16 at 09:52

Searching through the entire DOM on each keyup is going to cause a huge performance drop. Cache your results
Throttle your keyup event to only fire the filter when the user pauses typing
Re use your regular expression instead of re creating it multiple times inside your loop

```

// Cache your elements before hand
var namedElements = $(".element-holder .element");

// inside your throttled keyup event handler
// Check for empty strings
var filter = (this.value || "").trim(),
    regex = new RegExp(filter, 'i');

var toShow = namedElements.filter(function(index, element) {
    var dataName = element.data("name");
    return regex.test(dataName);
});
toShow.show();

var toHide = namedElements.filter(function(index, element) {
    var dataName = element.data("name");
    return !regex.test(dataName);
});
toHide.hide();

```

Searching throught data-value on keyup

3 Answers3