CODEWITHSUNDEEP
jquery
Fehu
Fehu

Reputation: 401

.find() based on logical OR of two attributers

I'm filtering a contact list using name and lastname set as attributes on a div

<div class="user" name="Sheldon" lastname="Cooper">...</div>

At the moment I'm able to do a partial search on a single attribute. (filter is the content of an input text)

ContactsList.find(".user .name:not(:Contains(" + filter + "))").parent().hide();
ContactsList.find(".user .name:Contains(" + filter + ")").parent().slideDown();

How I do on both? And how can I filter those that don't contain the filter value in both attributes?

Upvotes: 0

Views: 43

Answers (4)

Bluety
Bluety

Reputation: 1909

If I understand the problem, you can try this:

You hide all

ContactsList.find('.user').parent().hide();

You show filtered results:

ContactsList.find('.user[name="'+ filter + '"], .user[lastname="'+ filter + '"]').parent().slideDown();

Upvotes: 2

pawel
pawel

Reputation: 36975

ContactsList.find(".user")
 .parent().hide()  // hide all parents of .user elements
 .end()  // revert collection back to .user elements
 .filter("[name*=" + filter + "], [lastname*=" + filter + "]")  // filter the collection based on attribute values
 .parent().slideDown(); // show the filtered elements

http://jsfiddle.net/r23yLfrn/2/

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

You must have created a custom : expression because jQuery core would not filter an attribute using attribute:Contains() the way your code is shown.

Should also use data- attributes and take advantage of jQuery data() method to read them

I would suggest using filter(function). It gives you far more flexibility than selectors do

HTML

<div class="user" data-name="Sheldon" data-lastname="Cooper">...</div>

JS

$('.user[name]').filter(function(){
    var term = filter.toLowerCase(),
        data = $(this).data()
        name = data.name.toLowerCase(),
        lastName = $data.lastname.toLowerCase()
    return name.indexOf(term)>-1 || lastName.indexOf(term)>-1
})

Upvotes: 1

Dhiraj
Dhiraj

Reputation: 33618

Something like this maybe for not in both

ContactsList.find(".user:not([name*=" + filter + "]):not([lastname*=" + filter + "])").parent().hide();

For OR you can do this

ContactsList.find(".user[name*=" + filter + "], .user[lastname*=" + filter + "])").parent().hide();

Also notice the * which is selects those that contain the string

Upvotes: 1

Related Questions