### 实现
Layui Select组件中的模糊搜索功能
为了实现在
Layui `
select` 组件中添加模糊搜索的功能，可以利用
Layui内置的`
lay-filter`事件监听器以及自定义JavaScript逻辑来处理输入框的变化，并通过AJAX请求获取匹配的数据[^2]。
#### HTML结构
首先，在HTML部分创建一个带有特定ID的选择框：
```html
<div class="
layui-form
-item">
<label class="
layui-form
-label">选择</label>
<div class="
layui-input
-block">
<
select id="search
Select"
lay-search=""
lay-filter="demo"></
select>
</div>
</div>
```
这里使用了`
lay-search`属性使得该下拉列表能够响应用户的键盘输入并
显示过滤后的结果；同时设置了`
lay-filter="demo"`以便后续绑定事件处理器。
#### JavaScript初始化与配置
接着，在脚本文件中完成必要的初始化工作及事件绑定：
```javascript
layui.use(['form', 'jquery'], function(){
var form =
layui.form;
var $ =
layui.jquery;
// 初始化时加载全部数据项
$.getJSON('/api/getOptions', function(data){
var optionsHtml = '';
data.forEach(function(item){
optionsHtml += `<option value="${item.value}">${item.text}</option>`;
});
$('#search
Select').html(optionsHtml);
form.render('
select'); // 渲染
select元素
// 添加change事件监听器用于实时查询
form.on('
select(demo)', function(obj){
console.log(obj.elem); // 获取当前被选中的DOM对象
console.log(obj.value); // 获得你所需要的价值
// 如果需要在此基础上做更多事情比如发送Ajax请求更新其他UI组件...
});
// 输入变化触发自动补全/筛选
$(document).on('input','#search
Select',function(e){
let keyword=$(this).val();
if(keyword.length>0){
$.ajax({
url:'/api/searchOption',
type:'POST',
contentType:"application/json",
data:JSON.stringify({query:keyword}),
success:function(res){
update
SelectOptions($('#search
Select'), res.data);
form.render('
select');
}
})
}else{
loadAllOptions(); // 当清空输入框时恢复原始状态
}
})
function loadAllOptions() {
$.getJSON('/api/getOptions', function(data){
var optionsHtml = '';
data.forEach(function(item){
optionsHtml += `<option value="${item.value}">${item.text}</option>`;
});
$('#search
Select').html(optionsHtml);
form.render('
select');
});
}
function update
SelectOptions($element, newData) {
const newOptions = newData.map(option =>
`<option value="${option.value}" ${option.
selected ? "
selected" : ""}>${option.text}</option>`
).join('');
$element.html(newOptions);
}
});
});
```
上述代码展示了如何结合服务器端API接口实现基于关键词的即时检索，并刷新`<
select>`标签内的
选项。每当用户改变输入内容时都会发起新的HTTP POST请求至指定URL `/api/searchOption` 来获取符合条件的结果集，之后再调用辅助函数`update
SelectOptions()` 更新DOM节点。
博主刚开始接触layui框架，开发中遇到诸多问题，现进行整理以便后续查阅。例如，下拉框选项不显示，原因是每次都忘记重新渲染下拉框。
扫一扫
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
