layui 下拉搜索框怎么写
时间: 2023-09-05 22:13:58 浏览: 193
前端 layui-fromSelects 下拉框多选,搜索
在 layui 中,下拉搜索框可以通过下拉框组件 `select` 和表单组件 `form` 配合实现。
具体步骤如下:
1. 引入 `layui.css` 和 `layui.js` 文件:
```html
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
<script src="//cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.js"></script>
```
2. 在页面中添加下拉搜索框的 HTML 代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">下拉搜索框</label>
<div class="layui-input-inline">
<select id="search-select" lay-search="">
<option value="">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
<option value="5">杭州</option>
</select>
</div>
</div>
```
其中,`lay-search` 属性表示开启搜索功能,`option` 标签中的 `value` 值为选项的值,`option` 标签中的文本为选项的显示文本。
3. 在页面底部添加 JavaScript 代码:
```html
<script>
layui.use(['form'], function() {
var form = layui.form;
// 监听下拉框的选中事件
form.on('select(search-select)', function(data) {
console.log(data.value); // 输出选中的值
});
});
</script>
```
通过 `layui.use` 方法加载 `form` 模块,监听下拉框的选中事件,并输出选中的值。
以上就是 layui 下拉搜索框的实现方式。
阅读全文