Как фильтровать содержимое DIV на клавиатуре

Question

У меня есть поле поиска, под которым пользователь вводит. В этом случае я пытаюсь показать только соответствующие результаты, представленные в div.

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

 
      var noElem = true; 
 
      var val = $.trim(this.value).toLowerCase(); 
 
      el = tr.filter(function() { 
 
       return $(this).find('.mt-radio').text().toLowerCase().match("^" + val); 
 
      }); 
 
      if (el.length >= 1) { 
 
       noElem = false; 
 
      } 
 
      tr.not(el).fadeOut(); 
 
      el.fadeIn(); 
 
     } else { 
 
      tr.fadeIn(); 
 
     } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
 
<div class="modal-content"> 
 
    <form id="trainerinsertform" name="trainerinsertform" class="form-horizontal bv-form" novalidate="novalidate"> 
 
     <button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button> 
 
     <div class="modal-body addTrainerContainer"> 
 
      <section class="addTrainer_search"> 
 
       <div class="row-fluid"> 
 
        <span id="errmsgtrainer"></span> 
 
        <div class="form-group last"> 
 
         <input type="text" id="trainername" name="trainername" value="" autocomplete="off" maxlength="20" class="form-control" data-bv-field="trainername"> 
 
         <small class="help-block" data-bv-validator="notEmpty" data-bv-for="trainername" data-bv-result="NOT_VALIDATED" style="display: none;">Trainer Name cannot be empty</small><small class="help-block" data-bv-validator="stringLength" 
 
         data-bv-for="trainername" data-bv-result="NOT_VALIDATED" style="display: none;">Please enter a value with valid length</small> 
 
        </div> 
 
       </div> 
 
      </section> 
 
      <section class="trainers_listWrap"> 
 
       <li> 
 
        <label class="mt-radio mt-radio-outline traine"> 
 
         <input type="radio" data-value="One" class="trainerradio" value="15" name="One">One 
 
         <span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-radio mt-radio-outline traine"> 
 
         <input type="radio" data-value="Two" class="trainerradio" value="1" name="Two">Two 
 
         <span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-radio mt-radio-outline traine"> 
 
         <input type="radio" data-value="Three" class="trainerradio" value="23" name="Two">Two 
 
         <span></span> 
 
        </label> 
 
       </li> 
 
       <li> 
 
        <label class="mt-radio mt-radio-outline traine"> 
 
         <input type="radio" data-value="Four" class="trainerradio" value="10" name="Two">Two 
 
         <span></span> 
 
        </label> 
 
       </li> 
 
      </section> 
 
     </div> 
 
    </form> 
 
</div>

http://jsfiddle.net/cod7ceho/368/

Не могли бы вы сказать мне, как подбивать это

Answer 1

Я думаю, это то, что вы хотите? JSFiddle

Удалены "^" из вашего .find() Удалены var inputdata, так как он не используется. Исправлен HTML-синтаксис