Get variable from input and use it to change css classes

Question

I have an input field with id="search".

<input id="search" type="text" />

Also there are few <div>'s that contains some text, like this:

<div id="textblock">Some text here</div>
<div id="textblock">Some other text here</div>
<div id="textblock">Few strokes</div>
<div id="textblock">More words</div>

I need to change style of a <div> (display:none) if that <div> had a text that user types in input field on the go.

For example, if value in the input would be "strokes", div (or divs) with word "strokes" disappears:

<div id="textblock">Some text here</div>
<div id="textblock">Some other text here</div>
<div id="textblock">More words</div>

I was looking for a jQuery solution, and I found some parts of code, but I can't put them together into one working piece. I know I should use keyUp() function, :contains() etc.

The same id shouldn't be used for more than one element per page, use classes instead (change id="textblock" to class="textblock"). — Pieter VDE
– Pieter VDE, Commented Aug 8, 2014 at 8:15
Just curious: why would you want this? What are you using this for? — Pieter VDE
– Pieter VDE, Commented Aug 8, 2014 at 8:27

Community · Accepted Answer · 2017-05-23 11:49:20Z

4

Firstly, id attributes must be unique - you may not have multiple elements with the same ID. Instead you should use a class attribute:

<div class="textblock">Some text here</div>
<div class="textblock">Some other text here</div>
<div class="textblock">Few strokes</div>
<div class="textblock">More words</div>

To then filter you can use jQuery's :contains() selector to determine which of your .textblock elements contain the text entered into your input element. For this I'm using a blur event handler which will trigger when the input element no longer has focus:

$('#search').on('blur', function() {
    $('.textblock:contains(' + this.value + ')').hide();
});

JSFiddle demo.

If you want this to happen as soon as content is entered into the input element, we can use an input event handler instead and combine :contains() with jQuery's :not() selector to show elements which may have previously been hidden:

$('#search').on('input', function() {
    $('.textblock:contains(' + this.value + ')').hide();
    $('.textblock:not(:contains(' + this.value + '))').show();
});

JSFiddle demo.

As pointed out by Dreamonic in comments here, if you then want to handle the user removing the content from the input element, we need to ensure that we don't match the empty input against the .textblock contents. We can do this by using trim():

$('#search').on('input', function() {
    if (this.value.trim().length > 0) {
        $('.textblock:contains(' + this.value + ')').hide();
        $('.textblock:not(:contains(' + this.value + '))').show();
    }
    else
        $('.textblock').show();
});

JSFiddle demo.

Example

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Aug 8, 2014 at 8:10

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Pieter VDE Over a year ago

Your code fails when the user enters something, and then empties the input field. No lines are shown after doing that. I've updated the JSFiddle to ignore an empty input field, or spaces. Updated JSFiddle

James Donnelly Over a year ago

@Dreamonic both demos are working correctly for me on Chrome. The blur event handler doesn't have the :not(:contains(...)) which is needed to re-display the content which does not match the input - but the input event does have this.

Pieter VDE Over a year ago

Well, they certainly behave different from my demo, in which I solved your "bugs". But I don't know which of the demos is the OP's desired result, so that's for him to decide.

James Donnelly Over a year ago

@Dreamonic oh I see what you mean. Thanks for spotting that!

Pieter VDE Over a year ago

Glad to help, certainly because your answer is the best explained one IMO.

|

Kiran · Accepted Answer · 2014-08-08 08:12:53Z

0

Id's in your DOM should be unique. So changed your id's to classes for demo. Use .blur() and :contains(). Try this:

$("#search").blur(function(){
    if($(this).val().length)
        $("div.textblock:contains("+$(this).val()+")").hide();
    else
         $("div.textblock").show();
});

DEMO

answered Aug 8, 2014 at 8:12

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Comments

user3459464 · Accepted Answer · 2014-08-08 08:34:29Z

-1

 $( "div" ).each(function( index ) {
    if($( this ).text().contains($("#search").text()))
      $(this).hide();
 });

try above code on blur event of textbox

edited Aug 8, 2014 at 8:34

answered Aug 8, 2014 at 8:27

user3459464

2241 silver badge3 bronze badges

Collectives™ on Stack Overflow

Get variable from input and use it to change css classes

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related