CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to Hide/show div acting on keyup filter input

I have a number of divs that are listed and I want to be able to add an input field that will allow a user to start typing and the divs are filtered accordinly

I'm trying the code below, but it's not filtering. It's not throwing up any errors either, so I'm not sure what to do at this point...

Here's the html markup:

<input id="filter" type="text" class="form-control" placeholder="Type here...">


<ul id="equipdetails">
   <li>
      <div class="col-lg-8"><label data-equipid="3" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Pega<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="4" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">DOT NET<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="5" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Java<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="6" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">JAVA Script<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="26" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Ruby On Rails<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
   <li>
      <div class="col-lg-8"><label data-equipid="27" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">NEW QSS<span></span></label>
      </div>
      <div class="col-lg-4">
         <div class="exercise-img"></div>
      </div>
   </li>
</ul>

Here is JS Code

$('#filter').keyup(function()
  {
          var val = $.trim(this.value).toUpperCase();
          $(".mt-checkbox").each(function()
          {
                  var parent = $(this).parent(),
                          length = $(this).text().length > 0;
                  if (length && $(this).text().search(new RegExp(filter, "i")) < 0)
                  {
                          parent.fadeOut("slow");
                  }
                  else
                  {
                          parent.show();
                  }
          });
  })

This is my fiddle

http://jsfiddle.net/cod7ceho/145/

Upvotes: 1

Views: 778

Answers (3)

Shubham Khatri
Shubham Khatri

Reputation: 281686

Use indexOf() to search the value in the text like $(this).text().toUpperCase().trim().indexOf(val) < 0

$('#filter').keyup(function()
  {

          var val = $.trim(this.value).toUpperCase();
          console.log(val);
          $(".mt-checkbox").each(function()
          {
                  var parent = $(this).parent(),
                          length = $(this).text().length > 0;

                  if (length && $(this).text().toUpperCase().trim().indexOf(val) < 0)
                  {
                          parent.fadeOut("slow");
                  }
                  else
                  {
                          parent.show();
                  }
          });
  })

JSFIDDLE

Other way is to use the same method you are using and replace the filter in your regex with val since your need to send the value in regex not the object itself

$(this).text().search(new RegExp(val, "i")) < 0)

Also you will want to remove the dots once your filte our for that fade out the li and to select that use $(this).closest('li');

JSFIDDLE

Both methods work, It depends which you want to use.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You need to pass the variable val to the search function, there is no variable defined as filter

$(this).text().search(new RegExp(val, "i")

but is it possible to remove the dots also, traverse up to li like instead of immediate parent

var parent = $(this).closest('li'),

Fiddle

Upvotes: 1

Clyde Lobo
Clyde Lobo

Reputation: 9174

filter in your fiddle refers to the input with id filter

What you need in the value of the input

Change this

if (length && $(this).text().search(new RegExp(filter, "i")) < 0)

to

if (length && $(this).text().search(new RegExp($(filter).val(), "i"))

And it should work.

Upvotes: 0

Related Questions