使用jquery搜索工作不正常

Question

我正在尝试使用jquery搜索文本。

当我尝试搜索单词“Joe”时，不应显示第一个标题“姓名/姓氏”，因为第一个标题属于人“VatanayÖzbeyli，BurakÖzkan，EgemenÖzbeyli，Bozuyük

它应该只显示

姓名/姓氏 乔

$(document).ready(function() {
  $(".search").keyup(function() {
    var searchTerm = $(".search").val();
    //var listItemHead = $('.results thead').children('tr');
    //var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

    $.extend($.expr[':'], {
      'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
      }
    });

    $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e) {
      $(this).attr('visible', 'false');
      $(".results thead tr").attr('visible', 'false');
    });



    $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e) {
      // if($(this).find(".results tbody tr:containsi('" + searchSplit + "')")) {
      //   $(".results thead tr").attr('visible','true');
      // } else {
      //   $(".results thead tr").attr('visible','false');
      // }
      $(this).attr('visible', 'true');
      //alert($(this).parent());
      $(".results thead tr").attr('visible', 'true');
    });

    var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' item');

    if (jobCount == '0') {
      $('.no-result').show();
    } else {
      $('.no-result').hide();
    }
  });


  $(function() {
    var mark = function() {
      // Read the keyword
      var keyword = $("input[name='keyword']").val();

      // Determine selected options
      var options = {};
      $("input[name='opt[]']").each(function() {
        options[$(this).val()] = $(this).is(":checked");
      });

      // Remove previous marked elements and mark
      // the new keyword inside the context
      $(".context").unmark({
        done: function() {
          $(".context tbody tr").mark(keyword, options);
        }
      });
    };

    $("input[name='keyword']").on("input", mark);
    $("input[type='checkbox']").on("change", mark);

  });

});

body {
  padding: 20px 20px;
}

.results tr[visible='false'],
.no-result {
  display: none;
}

.results tr[visible='true'] {
  display: table-row;
}

.counter {
  padding: 8px;
  color: #ccc;
}

mark {
  background-color: rgb(238, 130, 238);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
<div class="container">
  <div class="form-group">
    <input type="text" class="search form-control" name="keyword" placeholder="What you looking for?">
  </div>
  <span class="counter center-block"></span>

  <div class="alert alert-warning no-result"><i class="fa fa-warning"></i> No result</div>


  <table class="table table-hover results context">
    <thead>
      <tr class='heading'>
        <th class="col-md-5 col-xs-5">Name / Surname</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Vatanay Özbeyli</td>
      </tr>
      <tr>
        <td>Burak Özkan</td>
      </tr>
      <tr>
        <td>Egemen Özbeyli</td>
      </tr>
      <tr>
        <td>Bozuyük</td>
      </tr>
    </tbody>
  </table>
  <table class="table table-hover results context">
    <thead>
      <tr class="heading">
        <th class="col-md-5 col-xs-5">Name / Surname</th>
      </tr>

    </thead>
    <tbody>
      <tr>
        <td>Joe</td>
      </tr>
      <tr>
        <td>Tim wood</td>
      </tr>
      <tr>
        <td>Ryan Martin</td>
      </tr>
      <tr>
        <td>Richard Gin</td>
      </tr>
    </tbody>
  </table>
</div>

Jquery search issue

Answer 1

使用Jquery数据表

CSS

https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css

JS

https://code.jquery.com/jquery-1.12.4.js https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

JAVASCRIPT

$(document).ready(function() {
    $('.results ').DataTable();
} );