CODEWITHSUNDEEP
javascriptjqueryhtml
purple11111
purple11111

Reputation: 719

Input filter nested divs when spaces are used

So I have a webpage and on this page I need to include a filter. I looked over a whole bunch of filter plugins but all of them are not working with the way the webpage is build up so I decided to do it myself. So far I got a basic filter working but I can't use it for surnames or basically anything that has a leading space.

For instance if the name is Kevin Durst

Then the filter shows the correct div when I fill in: Kevin But when I fill in Durst it shows nothing.

Here is the Fiddle with the code so far: http://jsfiddle.net/tV9RK/255/

HTML

<input class="search-individual-items" />

<div class="individual-items">
    <div class="individual">
      <div class="border">
        <div class="background">
          <div class="content">
            <h5 class="name">John Hendriks</h5>         
          </div>      
        </div>      
      </div>
    </div>
    <div class="individual">
      <div class="border">
        <div class="background">
          <div class="content">
            <h5 class="name">Kate Hendriks</h5>         
          </div>      
        </div>      
      </div>
    </div>
    <div class="individual">
      <div class="border">
        <div class="background">
          <div class="content">
            <h5 class="name">Triss Bufon</h5> 
          </div>      
        </div>      
      </div>
    </div>
</div>

JS:

$('.search-individual-items').keyup(function() {
    var value = $(this).val();
    var exp = new RegExp('^' + value, 'i');

    $('.individual-items .individual').each(function() {
        var isMatch = exp.test($('.name', this).text());
        $(this).toggle(isMatch);
    });
});

The Question

How can I change the .js so that it also allows to filter with the surnames?

I would appreciate it to see it working in a Fiddle.

Thanks everyone for helping.

Upvotes: 0

Views: 46

Answers (1)

Daniel Lizik
Daniel Lizik

Reputation: 3144

Your logic is fine but the ^ flag in your regex makes it look at the beginning of the string which ignores surname. Should be

var value = $(this).val();
var exp = new RegExp(value, 'i');

Upvotes: 1

Related Questions