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

}
相关推荐
晴殇i2 小时前
最近在 Github 名字叫“马尾辫”,这个真的很有趣看到头像
前端·后端·开源
10mAh2 小时前
【PaddleOCR】扫描版 PDF 无法复制、RAG 检索为空怎么解决?——OCR 解析与版面还原实战
前端·pdf·ocr
IMPYLH2 小时前
HTML 的 <embed> 元素
前端·数据库·html
IT_陈寒2 小时前
Vite打包时静态资源404?加个斜杠就能解决
前端·人工智能·后端
沐土Arvin2 小时前
音频录制sdk开发
前端·微信
anyup2 小时前
【2026年8月】uView Pro 千星,还拿到了 GVP
前端·uni-app·github
必须会一定会2 小时前
用纯 HTML/JS 做一个 AI 需求澄清器:把模糊想法转换成可执行任务书
开发语言·前端·javascript·人工智能·html·ai编程
10mAh2 小时前
【Linux】error while loading shared libraries 怎么解决?——ldd、RPATH 与动态链接排错
java·linux·前端
深念Y2 小时前
stable-diffusion.cpp 的 FLUX.2 Klein 9B 分步
java·前端·数据库
小帅不太帅2 小时前
1.5M 参数的 OCR 模型,我把它跑进了浏览器
前端·javascript·ai编程