如何同时使用多个搜索框检索？现有代码功能异常排查

我来帮你梳理下当前代码的问题，以及怎么修改才能实现两个搜索框同时过滤的效果：

问题1：重复的ID属性 #

HTML里的ID必须是唯一的，你给两个按钮都设置了id="search"，这会导致jQuery只会给第一个匹配到的按钮绑定点击事件——也就是说，你点第二个搜索按钮根本不会触发过滤逻辑，而且就算点第一个按钮，取值逻辑也有问题。

问题2：取值逻辑错误 #

$("#Account, #Invoice").val()这个写法只会返回第一个匹配元素的值（也就是Account输入框的内容），不管Invoice输入框里填了什么，过滤时都只会用Account的值，这就是为什么现在只有第一个搜索框生效。

修复后的完整代码 #

修改后的View（解决ID重复问题）

把按钮的id换成class，因为class可以重复使用：

<th>
  <p> Nr account: @Html.TextBox("Account") <input type="button" class="search-btn" value="Search" /> </p>
  <p> Nr invoice: @Html.TextBox("Invoice") <input type="button" class="search-btn" value="Search" /> </p>
</th>

修改后的jQuery（实现多条件同时过滤）

分别获取两个搜索框的值，然后判断表格行是否同时满足两个搜索条件（空的搜索框会自动忽略，不做限制）：

$('.search-btn').click(function () {
  // 分别获取两个搜索框的内容，去除首尾空格并转小写
  const accountValue = $("#Account").val().trim().toLowerCase();
  const invoiceValue = $("#Invoice").val().trim().toLowerCase();
  
  $("#myTable tr").filter(function () {
    const rowText = $(this).text().toLowerCase();
    // 两个条件都要满足：如果搜索框有值，行文本必须包含该值；空搜索框则直接通过
    const matchesAccount = accountValue === '' || rowText.includes(accountValue);
    const matchesInvoice = invoiceValue === '' || rowText.includes(invoiceValue);
    
    // 只有同时满足两个条件的行才显示
    $(this).toggle(matchesAccount && matchesInvoice);
  });
});

额外说明 #

• 现在不管点哪个搜索按钮，都会触发统一的过滤逻辑，两个搜索框的内容都会生效
• 如果某个搜索框是空的，会自动跳过这个条件的判断，你可以只填Account、只填Invoice，或者两个都填，都能正确过滤表格
• 用trim()去除了输入内容的首尾空格，避免用户不小心输入空格导致过滤不准确

内容的提问来源于stack exchange，提问作者user10099944