1

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>
7
  • can you display you HTML too
    – Amar Singh
    Sep 10, 2016 at 8:19
  • @YoYo There you go, added html
    – Harugawa
    Sep 10, 2016 at 8:24
  • 1
    If you know how to use $(this), use it properly....
    – Rayon
    Sep 10, 2016 at 8:25
  • There is no "data-value" attribute in HTML
    – Rayon
    Sep 10, 2016 at 8:31
  • 1
    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, 2016 at 8:35

3 Answers 3

3

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>

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

5
  • 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, 2016 at 8: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, 2016 at 8:49
  • Yeah, this is exactly what I have typed down.
    – Harugawa
    Sep 10, 2016 at 8: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, 2016 at 8: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 stackoverflow.com/questions/619621/…
    – Amar Singh
    Sep 10, 2016 at 9:01
0
  1. Searching through the entire DOM on each keyup is going to cause a huge performance drop. Cache your results
  2. Throttle your keyup event to only fire the filter when the user pauses typing
  3. 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();

```

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.