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

}
相关推荐
Jiaberrr15 分钟前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy39 分钟前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白39 分钟前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、40 分钟前
Web Worker 简单使用
前端
web_learning_32143 分钟前
信息收集常用指令
前端·搜索引擎
tabzzz1 小时前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
200不是二百1 小时前
Vuex详解
前端·javascript·vue.js
滔滔不绝tao1 小时前
自动化测试常用函数
前端·css·html5
码爸2 小时前
flink doris批量sink
java·前端·flink
深情废杨杨2 小时前
前端vue-父传子
前端·javascript·vue.js