layui控件开发,实现下拉搜索从数据库获取数据

1 标签部分使用带搜索的下拉框

js 复制代码
<div class="layui-inline">
		<label class="layui-form-label">单位</label>
		<div class="layui-input-inline">
				<select name="org" lay-search id="org_dwbh" lay-filter="org_dwbh">
						
				</select>
		</div>
</div>

2 编写数据加载方法

js 复制代码
//参数  下拉框是否进行显示
function DWInfoInit(isShow) {
		let bElement = $('#org_dwbh').parent().find('input');  //带搜索的下拉框的输入框

		new Promise((resolve, reject) => {
				let bContent = $(bElement).val();
				//根据输入框的内容加载单位信息,每次10条
				$.ajax({
					type: 'post',
					async: false,
					url: `***`,
					data: { Content: bContent, Num: 10 },
					success: function (res) {
						if (res.Code == 0) {
							resolve(res);
						} else {
							reject('单位信息获取异常');
						}
					},
					error: function (err) {
						reject('网络异常');
					}
				});
		}).then(res => {
				return new Promise((resolve, reject) => {
					//记录下输入框中输入的内容
					let bValue = $(bElement).val();

					let bCount = res.Data.length;
					let bData = res.Data;
					let bContent = `<option value="">-请选择-</option>`;
					for (let i = 0; i < bCount; i++) {
						let bInfo = bData[i];
						bContent += `<option value="${bInfo.DWBH}">${bInfo.MC}(编号:${bInfo.DWBH})</option>`;
					}
					$('#org_dwbh').html(bContent);
					bForm.render();

					resolve(bValue);
				});
		}).then(res => {
				return new Promise((resolve, reject) => {
					//界面重新加载事件监听   根据网站打开设备添加事件监听
					if (checkMobile()) {
						//移动端监听事件
						$('#org_dwbh').parent().find('input').on('input', function () {
							DWInfoInit(true);
						});
					} else {
						//PC端监听事件
						$('#org_dwbh').parent().find('input').on('compositionend', function () {
							DWInfoInit(true);
						});
					}

					resolve(res);
				});
		}).then(res => {
				return new Promise((resolve, reject) => {
					//$(bElement).val(res);
					$('#org_dwbh').parent().find('input').val(res);
					//$(bElement).focus();
					$('#org_dwbh').parent().find('input').focus();
					//layui-form-select
					if (isShow) {
						$('#org_dwbh').next().addClass("layui-form-selected");
					}
					
				});
		}).catch(err => {
				bLayer.msg(err);
		});

}
相关推荐
朦胧之2 小时前
AI 编程-老项目改造篇
java·前端·后端
swipe4 小时前
从 0 到 1 实现大文件上传:分片、秒传、断点续传、暂停、重试与服务端合并
前端·javascript·面试
爱勇宝5 小时前
我做了一个只用来搜歌词的小 App
android·前端·后端
甲维斯5 小时前
用AI还原《坦克大战》并3D化升级!
前端·人工智能·游戏开发
IT_陈寒5 小时前
SpringBoot自动配置坑了我一晚上,原来问题出在这
前端·人工智能·后端
kyriewen6 小时前
AI 生成的代码能跑就行?这 5 个坑迟早炸
前端·javascript·ai编程
谷子在生长6 小时前
纯血鸿蒙自定义弹窗最佳实践:从「到处复制」到「一行调用」
前端·harmonyos
壹方秘境6 小时前
我用Go语言开发了一个跨平台的HTTPS抓包和调试工具
前端·后端·ios
神秘面具男6 小时前
HarmonyOS 6.0跨端远程控制
前端·后端
枫树下x6 小时前
NestJS基础框架
前端