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

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

<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 编写数据加载方法

//参数  下拉框是否进行显示
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 = ``;
					for (let i = 0; i < bCount; i++) {
						let bInfo = bData[i];
						bContent += `">${bInfo.MC}(编号:${bInfo.DWBH})`;
					}
					$('#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);
		});

}

你可能感兴趣的:(layui,前端)