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);
		});

}
相关推荐
万少5 小时前
用腻了 WorkBuddy 的默认界面?这个开源小工具给它换上了毛玻璃
前端·javascript·后端
海上彼尚9 小时前
Nodejs也能写Agent - 16.LangGraph篇 - 条件分支与循环
前端·后端·langchain·node.js
To_OC10 小时前
从 “卡死半天” 到 “打字机效果”:大模型流式输出前端实现全记录
前端·javascript·llm
SoaringHeart10 小时前
Flutter最佳实践:键盘辅助视图输入框天添加图片附件
前端·flutter
kyriewen11 小时前
我看完这篇安全论文——AI推荐的npm包,92%是编出来的
前端·javascript·ai编程
小心我捶你啊12 小时前
数据采集和Web解锁不是一回事,从用途到规则区分
前端·爬虫·网络协议
hunterandroid13 小时前
[鸿蒙从零到一] ArkUI 基础组件实战:Text、Image、Button 与 TextInput
前端
fsssb13 小时前
Chromium 源码学习笔记(五):一次点击,在进入 JS 之前先经历了什么?
前端
hunterandroid13 小时前
WorkManager 可靠性实战:唯一任务、重试与幂等设计
android·前端