56

The :contains() jQuery selector allows you to match find elements that contain a specified string of text. What I want to do seems related: I'm providing the user a "filter" text box that they can type in, and I have a set of list items.

I want to have all list items that do not contain the text the user entered in the textbox be hidden as they type.

I can listen for the keyup event on the textbox, but I'm not sure how to do two things:

  1. "Invert" the :contains() selector results--I want to select elements that don't match, and hide them.
  2. Make the matching case sensitive.

It's occurred to me that I could use .filter( function(index) ), but I'm wondering if I'm overthinking this--is there a way to accomplish this already with the selectors/functions built-in to jQuery?

Josh
  • 7,232
  • 8
  • 48
  • 75
  • 14
    Just `$(".something:not(:contains('text'))")` works. Just tried on this thread: `$(".question:not(:contains('filter2134234'))")` – megawac Nov 19 '13 at 02:43
  • For the second point: "[Is there a case insensitive jQuery :contains selector?](http://stackoverflow.com/q/187537/15031)" – Jonathan Lonowski Nov 19 '13 at 02:45

3 Answers3

107

Assuming your user's text is stored in a variable called userString:

$(':not(:contains('+ userString +'))').hide();

will hide all of the elements not containing that string.

Edit: If you have control over the elements in the list items, you could transform the user's text when you store it in the userString var.

Lola
  • 1,878
  • 1
  • 13
  • 11
  • I wound up using a filter function anyway, because I needed to make the search case insensitive, and there was no simple transformation of the user's input that would make it match the text of the list items. But, I think this is the best answer I'm going to get. – Josh Nov 19 '13 at 12:05
  • I reviewed the discussion on the question http://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector and I felt like it was simpler to just use a filter function than try and modify :contains to be case-insensitive. – Josh Nov 19 '13 at 12:06
  • Have a injection vulnerability, by example as input: `test)),other...` – e-info128 Oct 17 '20 at 19:27
16

Let say that you want the list of all <td> that dont contains string 'Dinesh'.(assuming Dinesh is inside name Attribute)

$('tableId > tbody > tr > td').not("[name*='Dinesh']")
JF it
  • 2,403
  • 3
  • 20
  • 30
dinesh kandpal
  • 738
  • 7
  • 16
7

Use this:

$("div:not(:contains('John'))").css("text-decoration", "underline");
Odys
  • 8,951
  • 10
  • 69
  • 111
Habrashat
  • 687
  • 6
  • 12