当前位置: 首页 > news >正文

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 = `<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-selectif (isShow) {$('#org_dwbh').next().addClass("layui-form-selected");}});}).catch(err => {bLayer.msg(err);});}
http://www.lryc.cn/news/224445.html

相关文章:

  • 让代码变美的第一天 - 观察者模式
  • 微服务-网关设计
  • WxJava使用lettuce的redis实现access_token的共享
  • 干货:如何运作一个全新品牌?
  • TCP/IP卷一详解第二章Internet地址结构概要
  • 小程序 打开方式 页面效果 表单页面 点击跳到详情页 图标 获取后台数据 进行页面渲染
  • 一个“Hello, World”Flask应用程序
  • 计算机丢失mfc100.dll如何恢复,详细解析mfc100.dll文件丢失解决方法
  • 分享一本让你真正理解深度学习的书
  • Apache APISIX Dashboard 未经认证访问导致 RCE(CVE-2021-45232)漏洞复现
  • Git 安全警告修复手册:解决 `fatal: detected dubious ownership in repository at ` 问题 ️
  • 【MySQL事务篇】多版本并发控制(MVCC)
  • 拆分代码 + 动态加载 + 预加载,减少首屏资源,提升首屏性能及应用体验
  • 在 Vue3 中使用 mitt 进行组件通信
  • SQLite 3.44.0 发布!
  • 本地生活新赛道-视频号团购怎么做?
  • 输入一个url后,会发生什么事?
  • R语言和jsonlite库编写代码示例
  • 容联七陌携手岚时科技,解决医美机构回访3大痛点
  • 自动计算零售数据分析指标?BI软件表示可行
  • Qt读取xml文件并把内容显示到QTableview上
  • xv6-x86在ubuntu14.04 i386下正常编译、调试,在ubuntu23.04下编译各种报错--google镜像
  • 关于unity中 编辑器相关逻辑的记录
  • linux安装配置MongoDB并设置开机启动
  • 1366 - Incorrect string value: ‘\xE5\xB9\xBF\xE5\x85\xB0...‘ for column编码错误
  • K8S篇之谈谈kubelet的上报机制
  • 混沌系统在图像加密中的应用(小波混沌神经网络)
  • Node.js中的文件系统(file system)模块
  • react组件间通信之context
  • 京东数据分析:2023年10月京东洗衣机行业品牌销售排行榜