CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Вячеслав Неговский
Вячеслав Неговский

Reputation: 3

Get variable from input and use it to change css classes

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.

Upvotes: 1

Views: 473

Answers (3)

James Donnelly
James Donnelly

Reputation: 128776

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

Upvotes: 4

user3459464
user3459464

Reputation: 224

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

try above code on blur event of textbox

Upvotes: -1

Kiran
Kiran

Reputation: 20313

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

Upvotes: 0

Related Questions