我想在我的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');
}
}