使用 jquery 函数时，同一页面上的多个搜索输入不能一起使用

Question

我有 2 个 table，每个都有一个输入搜索。

当我在第二个输入字段中输入名称时，它开始缩小 table 结果，但是当我在第一个输入字段中输入名称时，它不起作用。

每个输入都分配给一个 table。 IE。 ID 1 的输入将查找 ID 1 的 table，ID 2 的输入 2 将查找 table 2.

两者不应互相干扰。

也许有人可以帮助我。这是我的 fiddle

我的代码：

<div class="container-fluid" style="margin-top:20px;">
  <input class="form-control form-control-sm" id="InputSearchGroup" placeholder="Search for Group">
  <div id="masterDataTableGroups">
    <table class="table table-stripe table-sm table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Test</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Number 2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Number 3</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="container-fluid" style="margin-top:20px;">
  <input class="form-control form-control-sm" id="InputSearchGroupMembers" placeholder="Search for Members">
  <div id="detailsDataTableGroupsMembers">
    <table class="table table-stripe table-sm table-hover">
      <thead>
        <tr>
          <th>Room</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>123243</td>
          <td>Marks</td>
        </tr>
        <tr>
          <td>238529</td>
          <td>Johnes</td>
        </tr>
        <tr>
          <td>312419</td>
          <td>Smith</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我的jquery:

// Below is the search function for the Groups table

$(function(GroupSearch) {
  $.expr[':'].containsIgnoreCase = function(n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  $('#InputSearchGroup').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode === 13)
      search(true);
    else
      $(this).data('timer', setTimeout(search, 100));
  });
});

function search(force) {
  if (this.value === '') {
    $('#masterDataTableGroups tbody tr').show();
    return;
  }
  var word = $('#InputSearchGroup')[0].value;
  var word_filter = $('#masterDataTableGroups tbody tr');
  if ($.trim(word) !== '')
    word_filter = word_filter.filter(':containsIgnoreCase(' + word + ')');
  $('#masterDataTableGroups tbody tr').hide();
  word_filter.show();
}


// Below is the search for the Members List

$(function(MemberSearch) {
  $.expr[':'].containsIgnoreCase = function(n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  $('#InputSearchGroupMembers').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode === 13)
      search(true);
    else
      $(this).data('timer', setTimeout(search, 100));
  });
});

function search(force) {
  if (this.value === '') {
    $('#detailsDataTableGroupsMembers tbody tr').show();
    return;
  }
  var word = $('#InputSearchGroupMembers')[0].value;
  var word_filter = $('#detailsDataTableGroupsMembers tbody tr');
  if ($.trim(word) !== '')
    word_filter = word_filter.filter(':containsIgnoreCase(' + word + ')');
  $('#detailsDataTableGroupsMembers tbody tr').hide();
  word_filter.show();
}

Answer 1

问题：-

You have two functions with name search.

解决方法：-

只需将您的搜索功能之一重命名为其他名称并替换它的出现，它就会起作用。

我的片段：-

// Below is the search function for the Groups table

// Below is the search for the Members List

$(function(MemberSearch) {
  $.expr[':'].containsIgnoreCase = function(n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  $('#InputSearchGroup').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode === 13)
      search2(true);
    else
      $(this).data('timer', setTimeout(search2, 100));
  });
});

function search2(force) {
  if (this.value === '') {
    $('#masterDataTableGroups tbody tr').show();
    return;
  }
  var word = $('#InputSearchGroup')[0].value;
  var word_filter = $('#masterDataTableGroups tbody tr');
  if ($.trim(word) !== '')
    word_filter = word_filter.filter(':containsIgnoreCase(' + word + ')');
  $('#masterDataTableGroups tbody tr').hide();
  word_filter.show();
}


// Below is the search for the Members List

$(function(MemberSearch) {
  $.expr[':'].containsIgnoreCase = function(n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  $('#InputSearchGroupMembers').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if (e.keyCode === 13)
      search(true);
    else
      $(this).data('timer', setTimeout(search, 100));
  });
});

function search(force) {
  if (this.value === '') {
    $('#detailsDataTableGroupsMembers tbody tr').show();
    return;
  }
  var word = $('#InputSearchGroupMembers')[0].value;
  var word_filter = $('#detailsDataTableGroupsMembers tbody tr');
  if ($.trim(word) !== '')
    word_filter = word_filter.filter(':containsIgnoreCase(' + word + ')');
  $('#detailsDataTableGroupsMembers tbody tr').hide();
  word_filter.show();
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid" style="margin-top:20px;">
  <input class="form-control form-control-sm" id="InputSearchGroup" placeholder="Search for Group">
  <div id="masterDataTableGroups">
    <table class="table table-stripe table-sm table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Test</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Number 2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Number 3</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="container-fluid" style="margin-top:20px;">
  <input class="form-control form-control-sm" id="InputSearchGroupMembers" placeholder="Search for Members">
  <div id="detailsDataTableGroupsMembers">
    <table class="table table-stripe table-sm table-hover">
      <thead>
        <tr>
          <th>Room</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>123243</td>
          <td>Marks</td>
        </tr>
        <tr>
          <td>238529</td>
          <td>Johnes</td>
        </tr>
        <tr>
          <td>312419</td>
          <td>Smith</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

使用 jquery 函数时，同一页面上的多个搜索输入不能一起使用

Multiple Search Input on same page doesn't work together when using jquery function

html

jquery