Question

我有一个用户输入的搜索框，在此活动中我试图仅显示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/

你能告诉我如何解决这个问题吗？

Answer 1

将 id =＆＃34; searchtrainer＆＃34; 添加到您的输入框

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

并且，更改 tr 变量选择器

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

并且，将 tr.filter 返回语句更改为

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

Answer 2

使用:contains：

＆＃13;

$('.searchtrainer').keyup(function() {
  if($(this).val() == '') {
  	$('.trainers_listWrap').children().show();
  } else {
  	$('.trainers_listWrap').children().hide(); 
	$('.trainers_listWrap').find('li:contains("'+($(this).val()).toUpperCase()+'")').show();
  }
});

＆＃13;

<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>

＆＃13;

Answer 3

您的代码中有两个主要问题，

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/

如何在文本输入中过滤DIV作为用户类型

3 个答案: