layui option模糊查询
时间: 2023-08-15 16:03:34 浏览: 50
您好!对于layui的option模糊查询,您可以使用Layui的下拉选择组件(select)结合模糊查询插件(select2)来实现。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/select2/4.0.13/css/select2.min.css">
</head>
<body>
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">模糊查询</label>
<div class="layui-input-block">
<select id="search_select" lay-search lay-filter="search_select">
<option value=""></option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<!-- 更多选项... -->
</select>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
<script src="https://cdn.staticfile.org/select2/4.0.13/js/select2.min.js"></script>
<script>
layui.use(['form'], function() {
var form = layui.form;
// 初始化select2插件
$('#search_select').select2();
// 监听select选择事件
form.on('select(search_select)', function(data) {
console.log(data.value); // 获取选择的值
});
});
</script>
</body>
</html>
```
这个示例代码中,我们引入了Layui和select2的相关资源文件,并在HTML中定义了一个带有模糊查询功能的下拉选择框。您可以根据自己的需求修改选项内容。在JavaScript部分,我们使用Layui的form模块初始化select2插件,并监听select选择事件,从而获取用户选择的值。
希望这个示例对您有帮助!如果有任何问题,请随时提问。