有关layui模糊搜索的代码
时间: 2023-11-08 15:04:49 浏览: 85
好的,关于layui模糊搜索的代码,我可以提供一份简单的示例,你可以根据自己的需求进行修改。以下是代码:
HTML部分:
```
<input type="text" id="search" placeholder="搜索">
<table id="table"></table>
```
JavaScript部分:
```
// 模拟数据
var data = [
{ name: "张三", age: "18", gender: "男" },
{ name: "李四", age: "20", gender: "男" },
{ name: "王五", age: "22", gender: "女" },
{ name: "赵六", age: "24", gender: "男" },
{ name: "孙七", age: "26", gender: "女" }
];
// layui的表格组件
layui.use(['table'], function() {
var table = layui.table;
// 渲染表格
table.render({
elem: '#table',
cols: [[
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ field: 'gender', title: '性别' }
]],
data: data
});
// 搜索
$('#search').on('input', function() {
var inputVal = $(this).val();
if (inputVal.length > 0) {
var result = [];
data.forEach(function(item) {
if (item.name.indexOf(inputVal) > -1 || item.age.indexOf(inputVal) > -1 || item.gender.indexOf(inputVal) > -1) {
result.push(item);
}
});
table.render({
elem: '#table',
cols: [[
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ field: 'gender', title: '性别' }
]],
data: result
});
} else {
table.render({
elem: '#table',
cols: [[
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄' },
{ field: 'gender', title: '性别' }
]],
data: data
});
}
});
});
```
你可以将以上代码复制到自己的项目中,并根据自己的需要进行修改。如果有任何疑问,欢迎继续提问。