使用Jquery进行实时搜索过滤

Question

当我搜索年龄会隐藏的名字时，我在实时搜索中遇到问题。 我想要的只是名称可以搜索它。 然后年龄不会出现。

请检查我的代码。

这是我的HTML

<table class="AvailableGroupLab availGrpLabs avalLabs">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
    <td><span>wewe</span></td>
    <td>16</td>
    </tr>

    <tr>
    <td><span>Melvin</span></td>
    <td>18</td>
    </tr>

    <tr>
    <td><span>Marvin</span></td>
    <td>20</td>
    </tr>
</table>

这是我的jQuery

  <script type="text/javascript">
var span = $(".AvailableGroupLab").clone().html();
function filter(element) {
    $('.AvailableGroupLab').html(span);
    var value = $(element).val().toLowerCase();
    $(".AvailableGroupLab span").each(function () {
        if ($(this).text().toLowerCase().search(value) == -1) {
            $(this).remove();
        }
    });
}
       </script>

Answer 1

尝试

function filter(element) {
    var $trs = $('.AvailableGroupLab tr').hide();
    var regexp = new RegExp($(element).val(), 'i');

    var $valid = $trs.filter(function () {
        return regexp.test($(this).find('td:first-child').text())
    }).show();

    $trs.not($valid).hide()
}

演示： 小提琴

Answer 2

    $("#src").keyup(function() {

    var val = $(this).val().toLowerCase();

    $(".name").hide();

       $(".name").each(function() {

        var text = $(this).text().toLowerCase();

         if(text.indexOf(val) != -1)
         {

             $(this).show(); 

         }

       });

    });

Answer 3

$（document）.ready（function（）{

/ ----我们在这里隐藏和隐藏GRABL产品的清单和价格---- /

    $(".col-md-9 .show_this_li").fadeOut(500);

/ ----我们在这里开始搜索功能---- /

    $("#src").keyup(function() {

    $(".col-md-9 .show_this_li").fadeIn(500);

/ ----我们在这里淡出并隐藏带有CATS标题的GRAV列表的第一个DIV ---- /

    $(".col-md-9 .hide_this").fadeOut(200);

    $('.clear_src').html("<h6>Clear Search</h6>");

/ ---获取搜索文本值---- /

     var val = $(this).val().toLowerCase();

      $(".hover").fadeOut(200);

      $('.error').html("").fadeIn(100);

       $(".hover").each(function() {

        var text = $(this).text().toLowerCase();

/ ----检查带有LI产品的搜索文本---- /

     if(text.indexOf(val) != -1)
         {

             $('.error').html("<h6>Please Wait...</h6>").fadeOut(200);
             $(this).fadeIn(300); 

         }else {
                //$('.error').html($('<h5/>').text("No Data Found"));       
            }



       });

    });

/ ----当用户向左或向左搜索字段时，我们会在此处收藏和显示带猫的列表---- /

$("#src").keyup(function() {

   var val = $(this).val();

     if(val.length<1)
      {

            $(".col-md-9 .hide_this").show(1000);
            $(".col-md-9 .show_this_li").fadeOut(500);
            $('.error').html("<h6>Refressing...</h6>").fadeOut(200);

      } 

  });