layui 热下拉框
时间: 2023-06-21 10:19:53 浏览: 87
Layui首字母搜索下拉框
layui 中的热下拉框是指在下拉框中输入关键字后,会根据关键字自动筛选出匹配的选项,并展示在下拉框中。实现这个功能需要使用 layui 的下拉框组件,同时结合一些 JavaScript 代码来实现动态筛选。以下是一个简单的示例:
HTML 代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<select id="city" lay-filter="city">
<option value="">请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="hangzhou">杭州</option>
<option value="chengdu">成都</option>
<option value="wuhan">武汉</option>
</select>
</div>
</div>
```
JavaScript 代码:
```javascript
layui.use(['form', 'jquery'], function() {
var form = layui.form;
var $ = layui.jquery;
// 给下拉框绑定 input 事件,实现热下拉框功能
$('#city').next().find('input').on('input', function() {
var keyword = $(this).val();
$('#city option').each(function() {
if ($(this).text().indexOf(keyword) === -1) {
$(this).hide();
} else {
$(this).show();
}
});
form.render('select');
});
});
```
在上述代码中,我们给下拉框绑定了 input 事件,当用户输入关键字时,遍历所有选项,如果选项的文本中不包含关键字,则隐藏该选项,否则显示该选项。最后调用 form.render('select') 方法重新渲染下拉框即可。
阅读全文