带AJAX和Jquery的asp.net MVC中的实时搜索数据

Posted 2021-04-29

我想在我的asp.net MVC页面中添加实时搜索功能。

我的数据库中有产品类别表，其中包含类别名称和类别图像。我已经在视图表单控制器中显示了所有这些记录。我在桌子顶部添加了一个搜索框。所有记录均显示完美。

现在，我想要的是，当用户在搜索框中输入类别名称时，与用户输入匹配的名称将在表中显示其图像。当用户不搜索任何内容时，所有数据都会像以前一样显示。我希望这与AJAX和Jquery的帮助而不是与Jquery数据表插件的使用有关。

所以请帮助我做到这一点。希望能得到更好的解决方案。

谢谢。

答案

只是jQuery应该可以解决问题。

用数据填充元素，例如，使用具有1行/条目的html表

<input type="text" onkeyup="search()" id="searchfield" />
<table class="resultstable">
  <tr data-name="your keyword"></tr>
  <tr data-name="your keyword1"></tr>
  <tr data-name="your keyword2"></tr>
  <tr data-name="your keyword3"></tr>
  <tr data-name="your keyword4"></tr>
<table>

然后使用jQuery

function search() {
    var val = $('#searchfield').val();
    if (val) {
      val = val.toLowerCase();
      $('table.resultstable tr:not(.hidden)').addClass('hidden');
      $(`table.resultstable tr[data-name*=${val}].hidden`).removeClass('hidden');
    } else {
      $('table.resultstable tr').removeClass('hidden');
    }
}