使用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);

      } 

  });