layui自带的搜索功能lay-search介绍

layui是一款非常好用的前端库，封装了弹窗、提示、表单、图标等一系列功能。今天欧哥简单介绍layui封装的search功能lay-search。
 

介绍

lay-search 是Layui框架中用于<select>标签的一个属性，它使得下拉选择框（select）具备搜索功能。用户可以在下拉框中输入文字，然后下拉列表会自动筛选出与输入文字相匹配的选项，类似于搜索引擎的搜索功能，极大地提高了用户体验。
 

使用方法

确保引入Layui：首先，确保你的项目中已经正确引入了Layui的CSS和JS文件。
HTML结构：在HTML中，你需要将<select>标签包裹在一个具有class="layui-form"的容器中，并在<select>标签上添加lay-search属性。

<div class="layui-form">  
    <div class="layui-form-item">  
        <label class="layui-form-label">用户类型</label>  
        <div class="layui-input-inline">  
            <select id="UserTypesID" lay-search>  
                <option value="">请选择用户类型</option>  
                <!-- 这里动态添加选项 -->  
            </select>  
        </div>  
    </div>  
</div>

 

动态添加选项

由于下拉框的选项通常是动态的，你需要通过JavaScript（如使用Ajax请求）从服务器获取数据，并将这些数据动态添加到<select>标签中。添加完选项后，需要使用layui.form.render('select')来重新渲染下拉框，以确保搜索功能正常工作。

// 假设这是从服务器获取的数据  
var data = [  
    { id: 1, text: '管理员' },  
    { id: 2, text: '普通用户' }  
];  

// 动态添加选项  
var select = document.getElementById('UserTypesID');  
data.forEach(function(item) {  
    var option = new Option(item.text, item.id);  
    select.appendChild(option);  
});  
 
// 重新渲染下拉框  
layui.form.render('select');

 

注意事项

1、必须包裹在layui-form中：lay-search属性只有当<select>标签被包裹在具有class="layui-form"的容器中时才会生效。
2、动态数据：如果下拉框的选项是动态加载的，那么在添加完选项后，一定要使用layui.form.render('select')来重新渲染下拉框，以确保搜索功能和其他表单功能（如验证）正常工作。
3、避免重复渲染：如果页面上有多个需要动态渲染的表单元素，建议只在所有动态数据都加载完成后统一调用layui.form.render()进行渲染，以避免不必要的性能开销。

这样，我们就实现了Layui框架中带搜索功能的下拉框。