CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to filter DIV as user types inside text input

I have a Search Box under which user types in , on this event i am trying to show only the relevant results present under div

This is my js code 

$(document).ready(function()
{
        $('.searchtrainer').keyup(function()
        {
                var tr = $('.trainers_listWrap'); 
                if ($(this).val().length >= 2)
                {
                        var inputdata = $.trim($(".searchtrainer").val());

                        var noElem   = true;
                        var val = $.trim(this.value).toLowerCase();
                        el = tr.filter(function()
                        {
                                return $(this).find('.mt-radio').text().toLowerCase().indexOf(val) >= 0;
                        }); 
                        if (el.length >= 1)
                        {
                                noElem   = false;
                        }

                        tr.not(el).fadeOut();
                        el.fadeIn();

                }
                else
                {
                        tr.fadeIn(); 
                        $('#errmsgnovideos').hide();
                }
        })
});

This is my HTML 

<div class="modal-body addTrainerContainer">
   <section class="addTrainer_search">
      <div class="row-fluid">
         <div class="input-group">
            <input type="text" class="form-control searchtrainer" placeholder="Search or Add trainer">

         </div>
      </div>
   </section>
   <section class="trainers_listWrap">
      <li>            <label class="mt-radio mt-radio-outline">ONE 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
      <li>            <label class="mt-radio mt-radio-outline">TWO 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
      <li>            <label class="mt-radio mt-radio-outline">THREE 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
      <li>            <label class="mt-radio mt-radio-outline">Four 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
      <li>            <label class="mt-radio mt-radio-outline">FIVE 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
   </section>
</div>

This is my updated fiddle

http://jsfiddle.net/cod7ceho/364/

Could you please tell me how to resolve this ?

Upvotes: 0

Views: 288

Answers (3)

selvakumar
selvakumar

Reputation: 654

There are 2 main issues in your code, 

1) You have used class selector instead of ID selector
2) You have to use li text to compare but you have taken the whole section to compare.

Refer : http://jsfiddle.net/cod7ceho/363/

Upvotes: 0

Tanmay Vats
Tanmay Vats

Reputation: 429

Add id="searchtrainer" to your input box

<input type="text" id="searchtrainer" class="form-control searchtrainer" placeholder="Search or Add trainer">

And, Change your tr variable selector

var tr = $('.trainers_listWrap li');

And, Change your tr.filter return statement to

return $(this).find('.mt-radio').text().toLowerCase().match("^" + val );

Upvotes: 2

Christof
Christof

Reputation: 2734

Using :contains: 

$('.searchtrainer').keyup(function() {
  if($(this).val() == '') {
  	$('.trainers_listWrap').children().show();
  } else {
  	$('.trainers_listWrap').children().hide(); 
	$('.trainers_listWrap').find('li:contains("'+($(this).val()).toUpperCase()+'")').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body addTrainerContainer">
   <section class="addTrainer_search">
      <div class="row-fluid">
         <div class="input-group">
            <input type="text" class="form-control searchtrainer" placeholder="Search or Add trainer">
          
         </div>
      </div>
   </section>
   <section class="trainers_listWrap">
      <li>            <label class="mt-radio mt-radio-outline">ONE 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
      <li>            <label class="mt-radio mt-radio-outline">TWO 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
      <li>            <label class="mt-radio mt-radio-outline">THREE 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
      <li>            <label class="mt-radio mt-radio-outline">Four 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
      <li>            <label class="mt-radio mt-radio-outline">FIVE 
         <input type="radio" value="1" name="test">
         <span></span>
         </label>
      </li>
   </section>
</div>

Upvotes: 0

Related Questions