如何篩選DIV文本里面輸入用戶類型

我有一個搜索框下這，在這個事件我試圖只顯示在DIV如何篩選DIV文本里面輸入用戶類型

目前相關結果用戶類型這是我的js代碼

$(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(); 
       } 
     }) 
});

這是我的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>

這是我更新的小提琴

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

請問如何解決這個問題？

來源

2016-12-13 Pawan

要回答這個問題，我們需要知道你的HTML的一般結構。現在你有一堆列表項目（無效）的HTML。但是每件商品下面的內容在哪裏？在列表中？外？顯示一般的HTML結構。 –

解決什麼問題？你需要更具體一些，你期望什麼以及你得到的結果/錯誤是什麼？ – Esko

首先，您的HTML中沒有包含「searchtrainer」ID的元素。 – makshh

添加ID = 「searchtrainer」您輸入框

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

而且，更改TR變量選擇

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

而且，更改tr.filter return語句

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

來源

2016-12-13 13:21:23

美麗的解釋非常感謝。 – Pawan

使用:contains：

$('.searchtrainer').keyup(function() { 
 
    if($(this).val() == '') { 
 
    \t $('.trainers_listWrap').children().show(); 
 
    } else { 
 
    \t $('.trainers_listWrap').children().hide(); 
 
\t $('.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>

來源

2016-12-13 13:17:25 Sojtin

非常感謝。 – Pawan

有您的代碼2個主要問題，

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.

參見：http://jsfiddle.net/cod7ceho/363/

來源

2016-12-13 13:23:34 selvassn

如何篩選DIV文本里面輸入用戶類型

回答

相關問題