html部分通过给select设定属性 lay-search 来开启搜索匹配功能 ,给select父级layui-form的类名,一定要搭配使用才能显示
<div class="layui-form-item" style="border-bottom:1px solid #009688;padding: 20px 10px;">
<div class="layui-inline layui-form" style="width:240px;margin-right: 0;">
<select name="modules" lay-verify="required" lay-search="" id="test_user" lay-filter="test_user" >
<option value="">选择或输入...</option>
</select>
</div>
</div>
layui.use('form', function() {
form = layui.form;
//渲染下拉搜索框
$.post('{:U("api/.../...")}',{},function(data){
if(data.success){
var data = data.data;
var len = data.length;
var sel = ''
for(var i=0;i<len;i++){
sel+='<option value="'+data[i].id+'" >'+data[i].nickname+'</option>'
}
$('#test_user').append(sel);
form.render(); //更新全部
}
//监听下拉框
form.on('select(test_user)', function(data){
var txt = $("#test_user option:selected").text();//获取select选中的值
$('.test_user').html(txt);
});
});
}
注意!!!!
光写html页面不在js里面去调用,css样式就显示不出来,一定要加上js部分,如:
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>