想要实现可输入，可选择，可以直接定义两个标签（input、select），对下拉框进行监听，将下拉框的值赋值给input
html代码
<div class="layui-inline"><label class="layui-form-label">机 构 名 称<fontcolor="red">*</font></label><div class="layui-input-inline"><input type="text" name="name" id="agencyName" lay-verify="required" style="position:absolute;z-index:2;width:80%;"placeholder="请输入或选择机构名称" lay-reqtext="机构名称不能为空" class="layui-input" autocomplete="off"/><select name="confidentialityAgencyName" id="confidentialityAgencyName" lay-filter="confidentialityAgencyName"></select></div></div>
position:absolute 在这里是让input和select在同一位置。 z-index:2 是为了让input在select上面。 width:80% 是为了不盖住select后面的小三角符号，select还可以点击。 autocomplete=“off” 为了不自动填充input框，免得压盖select选项
定义下拉框下拉数据，对下拉框进行监听
js代码
<script>layui.use(['form','layselect','formSelects'], function () {var form = layui.form,layer = layui.layer,$ = layui.$;var formData=parent.formData;//拿到父页面数据//机构名称select下拉框var layselectconfidentialityAgencyName = layui.layselect;layselectconfidentialityAgencyName.render({elem:"#confidentialityAgencyName",url:'/core/confidentialityagency/selectname',//归属类型select:(formData==null?undefined:formData.name),format:function(data){return{code:data.id,codeName:data.name};return data;}});//监听机构select下拉框form.on('select(confidentialityAgencyName)', function (data) {/* if(data.value!=null&&data.value!=""&&data.value!=undefined){selectAgencyName(data.value);} */selectAgencyName(data.value);});});//监听机构名称下拉框，为input赋值function selectAgencyName(value){$.ajax({url:'/core/confidentialityagency/getconfidentialityagency',method:'get',data:{data:value},async: false,success: function (data) {if(data.code==-1){$('#agencyName').val("");//输入框为空}if(data.code==0){$('#agencyName').val(data.data.name);//输入框赋值}//渲染selectform.render("select");},error:function (data) {alert("selectreach"+data.msg);}});}</script>
后端代码
//机构下拉框/core/confidentialityagency/selectname@RequestMapping("/confidentialityagency/selectname")@ResponseBodypublic List<ConfidentialityAgency> getConfidentialityAgencyName() {return confidentialityAgencyService.getConfidentialityAgencyName();}//监听机构下拉框/core/confidentialityagency/getconfidentialityagency@GetMapping("/confidentialityagency/getconfidentialityagency")@ResponseBodypublic JsonResult getConfidentialityAgency(String data) {System.out.println("------------------"+data);return confidentialityAgencyService.getConfidentialityAgency(data);}
service层
@Overridepublic List<ConfidentialityAgency> getConfidentialityAgencyName() {List<ConfidentialityAgency> list = confidentialityAgencyMapper.selectList(null);return list;}@Overridepublic JsonResult getConfidentialityAgency(String data) {if (data == null || data.isEmpty())throw new IllegalArgumentException("数据不存在，请输入或者重新选择");ConfidentialityAgency cAgency = confidentialityAgencyMapper.selectById(data);return JsonResult.success("select ok", cAgency);}
