解决layui的下拉搜索框异步加载数据的问题

最新推荐文章于 2025-07-05 14:12:24 发布
最新推荐文章于 2025-07-05 14:12:24 发布
阅读量5.8k 收藏 5
点赞数 4
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_38007940/article/details/85467040
本文介绍如何在layui框架中自定义下拉搜索框的实现过程，通过复制默认渲染的HTML结构来快速定制样式，并利用前端代码实现下拉选项的键盘导航和动态加载功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

思路分析：当我使用layui默认的下拉搜索框的时候，layui会默认渲染出一个HTML结构，所以我把渲染出来的这个结果直接给复制出来，这样css的样式就不用从头到尾写一遍了，

前端代码（我用的是jsp）：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" href="statics/css/font.css">
    <link rel="stylesheet" href="statics/css/xadmin.css">
</head>
<body>
<form class="layui-form" action="">
  

           <div class="layui-inline">
                <label class="layui-form-label">搜索选择框</label>
                <div class="layui-input-inline">
                          <div class="layui-form-select layui-form-selected searchDiv">
                            <div class="layui-select-title"><input type="text" placeholder="直接选择或搜索选择" value="" class="layui-input search_input" id="search_input"></div>
                            <dl class="layui-anim layui-anim-upbit" style="display: block;">
                                <!-- <dd lay-value="" class="layui-select-tips layui-this">直接选择或搜索选择</dd> -->
                            <!--     <dd lay-value="1" class="layui-this">layer</dd>
                                <dd lay-value="2" class="">form</dd>
                                <dd lay-value="3" class="">layim</dd> -->
                            <!--     <dd lay-value="4" class="">element</dd>
                                <dd lay-value="5" class="">laytpl</dd>
                                <dd lay-value="6" class="">upload</dd>
                                <dd lay-value="7" class="">laydate</dd>
                                <dd lay-value="8" class="">laypage</dd>
                                <dd lay-value="9" class="">flow</dd>
                                <dd lay-value="10" class="">util</dd>
                                <dd lay-value="11" class="">code</dd>
                                <dd lay-value="12" class="">tree</dd>
                                <dd lay-value="13" class="">layedit</dd>
                                <dd lay-value="14" class="">nav</dd>
                                <dd lay-value="15" class="">tab</dd>
                                <dd lay-value="16" class="">table</dd>
                                <dd lay-value="17" class="">select</dd>
                                <dd lay-value="18" class="">checkbox</dd>
                                <dd lay-value="19" class="">switch</dd>
                                <dd lay-value="20" class="">radio</dd> -->
                            </dl>
                        </div>
                </div>
            </div>
     
       <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

 <script src="statics/lib/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'jquery','layer'], function(){
  var form = layui.form
    var $=layui.$;
    var layer=layui.layer;
    var oldValue=null;
    
    $(".search_input").keyup(function(event){
        //alert(event.keyCode)
        //layer.msg(event.keyCode);
        if(event.keyCode==40){      //方向健↓
        //如果是最后一个则不用做任何事情
        if($(this).parent().next("dl").children(":last").hasClass("layui-this")){
            return;
        }
            $(this).parent().next("dl").find("dd.layui-this").removeClass("layui-this").next("dd").addClass("layui-this");
            $dl=$(this).parent().next("dl");
            $dl.scrollTop($dl.scrollTop()+$dl.find("dd.layui-this").height());
            return;
        }
            
        if(event.keyCode==38){ //方向健↑
            //如果是第一个则不用做任何事情
            if($(this).parent().next("dl").children(":first").hasClass("layui-this")){
                return;
            }
            $(this).parent().next("dl").find("dd.layui-this").removeClass("layui-this").prev("dd").addClass("layui-this");
            $dl=$(this).parent().next("dl");
            $dl.scrollTop($dl.scrollTop()-$dl.find("dd.layui-this").height());
            return;
        }
            
        if(event.keyCode==13){         //按回车键给文本框赋值
            $(this).val($(this).parent().next("dl").find("dd.layui-this").html());
            oldValue=$(this).val().trim();
            return;
        }
        
        if(oldValue!=$(this).val().trim()){ //如果输入框的值没有改变就没必要发送ajax请求
            //根据用户输入的内容发送ajax请求查询以此内容开头的商品简码，从而查出符合要求的商品名字
            $.get("product/getProductsByCode",{"productCode":$(this).val()},function(data){
                        if(!!data){
                            //清除掉以前的值
                            $(".searchDiv dl.layui-anim").html("");
                            for(var i=0;i<data.length;i++){

                                $(".searchDiv").find("dl.layui-anim").append("<dd lay-value=\""+data[i].productId +"\" onclick=\"changeSearchText(this)\">"+data[i].productName+"</dd>");
                                $(".searchDiv").find("dl.layui-anim").children("dd:first").addClass("layui-this");
                            }
                            //重新渲染select
                            //form.render('select');
                        }
                    },'json')
        }
    })


  
        form.on('submit(formDemo)',function(){
            return false;    //这样的做的目的是因为里面有文本输入看，当我们按回车键的时候会默认提交表单，所以要进行此操作
        })
});

function changeSearchText(obj){
    document.getElementById("search_input").value=obj.innerHTML;
}
</script>

</body>
</html>

后台代码我就不贴了，我是认为后台没有必要贴了

m0_38007940_aj
关注
layui select 动态赋值+ 下拉可搜索
qq_45101496的博客
03-16 2196
select下拉可搜索加 lay-search HTML <select id="shopName" name="orderState" lay-search class="valid" style="height: 31px"> </select> js 显示的是shopName 给后台传的值是shopId $(function () { var pasams = { page: 1, l
关于layui的下拉搜索框异步加载数据的解决方法
10-16
今天小编就为大家分享一篇关于layui的下拉搜索框异步加载数据的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【layui】扩展组件xm-select 下拉框带搜索功能 异步请求接口 ajax加载数据 ①
Khun_HWJ的博客
10-15 2万+
效果图 需求：点击搜索，输入完回车后请求接口获取下拉列表数据。目前插件是多选的，但要求只能选择一个。后面进行处理。 接口部分 html部分 <div id="addteacher" class="xm-select-demo"></div> js部分 只需引入xm-select.js，剩下的就只有渲染了 xmSelect.render({ el: '#addteach...
掌握layui select下拉框插件的多选功能
最新发布
weixin_42518334的博客
07-05 1020
随着Web技术的不断进步，用户体验在网页设计中的重要性日益凸显。layui作为一个经典而强大的前端UI框架，以其简洁的界面和丰富的组件赢得了开发者的青睐。layui为开发者提供了包括布局、导航、表单、弹窗等多样化的模块，使得开发工作更加高效与便捷。在本章中，我们首先会带您快速了解layui框架的起源与设计理念，接着深入剖析其核心的模块化结构，以及如何在项目中进行安装和引入。这一章将为您打下使用layui进行Web开发的基础，为之后章节中详细介绍的select下拉框组件及其高级应用做铺垫。
Layui带搜索的下拉框的使用以及动态数据绑定方法
12-13
说起下拉框大家一定不陌生，就是放着指定内容的容器需要什么就直接选择就可以了，很方便。但是凡事都有利弊两面，在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花，影响用户体验。所以就有了带查询的下拉框出现，这个下拉框的功能很强大，结合了输入框和下拉框为一体，既可以进行模糊查询，又可以直接选择，比以前的下拉框更加方便了。今天要介绍的就是layui的form表单组件里的带查询的下拉框。 用任何插件都需要引用相应的css文件和js文件，在这就不多说了。但layui的form表单组件不仅要引用插件还需要加载相应的模块，少了这两步操作，select、checkbox、radio等将无法显示，并且无法
Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法
飞起来的小猪的博客
12-05 3万+
Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法
layui扩展组件之树形下拉多选组件
12-19
//LayUI扩展组件之treeselect.js by:Van 这是一个基于ztree.js和layui扩展的树形下拉多选组件
jQuery基于Layui下拉框搜索提示列表代码
06-10
1. 数据动态加载：如果搜索数据来自服务器，可以使用Ajax异步请求加载。 2. 动画效果：利用Layui的动画API，如淡入淡出，提升用户体验。 3. 键盘导航：支持上下键选择搜索结果，回车键选定选中项。 4. 拼音库集成：...
【layui】扩展组件xm-select 下拉框带搜索功能 异步请求接口 ajax加载数据 ②
Khun_HWJ的博客
11-10 4648
根据地址来回填数据，如果地址栏有参数，那么下拉查询需要回填对应的数据 1、地址栏 admin/pages/storemanage/scangetbook/scangetbook.html?userid=19&nickname=Undefine 2、有地址参数为图一，无地址参数为图二，根据userid来回填值 需求：根据地址栏参数来判断下拉数据的回填，当点击查询时，如果下拉框有值就直接走第二步，如果下拉框没有值则提示【请先选择用户】 用到的是layui的第三方插件，xm-select xm-se
layui穿梭框数据动态加载
u012230371的博客
08-08 526
layui 穿梭框数据动态加载
layui框架使用 xmselect 数据异步加载，可搜索数据 监听选择动作
masterphp的博客
12-09 4115
layui框架使用 xmselect 数据异步加载，可搜索数据 监听选择动作
【LayUI】LayUI拓展组件：TreeSelect树形下拉选择器
aadnf的博客
04-13 5951
基于 layui 的树形下拉选择器。支持异步加载，提供点击回调函数，提供设置占位符、选中节点等方法。组件下载地址：https://gitee.com/sang93/treeselect。
LayUI下拉树TreeSelect的使用
小马同学
12-30 3万+
树形结构在实际开发中是很长用的一种结构。最近写了一个LayUI的小案例，其中用到了TreeSelect，这里整理一下。 TreeSelect官网地址：https://fly.layui.com/extend/treeSelect/ 显示效果图。 因为TreeSelect不是LayUI官方开发的，而是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。 之后页面只需要引入...
记录Layui-select中的搜索下拉框lay-search相关的使用(对于初次使用是真的难顶)
热门推荐
Zachariahs的博客
08-20 4万+
对于一个后端开发人员来说,常用的easyUI,miniUI,bootstrap,layUI等前端整合式的UI框架能很好的提高页面美观程度以及开发效率 我个人在开发中,使用过miniUI,bootstrap,layUI,其中miniUI是在公司开发时公司要求学习使用的,个人写东西还是偏重于layUI和bootstrap,毕竟看着漂亮点. 本次记录的...
layui，下拉，单选，加搜索
zxp_smile的博客
06-03 296
select，添加属性，lay-search <select name="category_id" lay-search>
layui 之可搜索的下拉框select lay-serach
Amy的博客
03-22 1万+
按照官方文档如下写法 <select id="branchCompanyId" name="branchCompanyId" class="layui-select" lay-search> <option value="">选择机构</option> </select> 在外层包一个class=‘layui-form’的元素之后，点...
layui select 可输入 可搜索
juziaixiao的博客
09-14 2309
html代码 <input type="text" value=" " id="HandoverCompany" class="layui-input" style="position:absolute;z-index:2;" lay-verify="required" οnkeyup="search()" οnfοcus="search()" autocomplete="off"> <select name="suppl
layui
m0_64180190的博客
12-09 1466
搜索
layui设置下拉列表框的选中选项
06-20
<think>我们正在使用Layui框架，需要设置下拉列表框的默认选中选项。根据引用[1]和[2]提供的方法，我们可以采用两种方式：1.通过触发dd元素的点击事件来模拟选择（引用[1]的方法）2.通过设置原生select的option的selected属性，然后重新渲染form（引用[2]的方法）另外，Layui官方也提供了form.val()方法来进行表单赋值，这可能是更推荐的方式。因此，我们可以总结三种方法：方法一（触发点击事件）：-首先，需要知道要选中的选项的lay-value值（或者value值，但注意lay-value和value可能不同）-然后，找到该选项对应的dd元素，触发click事件方法二（设置selected属性并重新渲染）：-获取原生select元素-遍历其options，将对应值的option的selected属性设置为true-调用form.render('select')重新渲染下拉框方法三（使用form.val()方法）：-这是Layui提供的表单赋值方法，可以方便地设置表单元素的值，包括下拉框。下面我们分别详细说明：方法一：触发点击事件（适用于动态添加选项后立即设置选中）步骤：1.确保下拉框已经渲染完成2.根据要选中的值，构造选择器找到dd元素（注意：如果下拉框有搜索功能，可能结构稍有不同，但一般结构是：select元素相邻的兄弟元素div.layui-form-select下的dldd）3.触发该dd元素的click事件示例代码：```javascript//假设select的id为"test"，要选中的值为"2"varvalue='2';//找到dd元素并触发点击$('div.layui-form-select[lay-filter="test-filter"]').find('dd[lay-value="'+value+'"]').click();```注意：这里我们通过lay-filter来定位下拉框，因为Layui渲染后会在select相邻位置生成一个div，我们可以通过select的lay-filter属性来定位这个div。或者也可以通过select的id来定位，但生成的div的id并不是原来的id，所以我们可以通过select的id找到它相邻的div。更通用的做法（通过select的id）：```javascriptvarvalue='2';//先通过select的id找到它后面的div.layui-form-selectvarselectDiv=$('#test').siblings('div.layui-form-select');//在selectDiv内找到dd元素vartargetDD=selectDiv.find('dd[lay-value="'+value+'"]');targetDD.click();```方法二：设置原生select的selected属性并重新渲染步骤：1.获取原生select元素2.遍历其options，设置对应值的option的selected属性为true3.调用form.render('select')重新渲染示例代码：```javascriptvarselectElem=document.getElementById('test');varvalue='2';for(vari=0;i<selectElem.options.length;i++){if(selectElem.options[i].value==value){selectElem.options[i].selected=true;break;}}//重新渲染form.render('select');```方法三：使用form.val()方法（推荐）Layui的form模块提供了val方法，可以快速设置表单的值。步骤：1.给form指定一个lay-filter，或者直接通过选择器设置2.使用form.val()方法设置值示例代码：```javascript//通过lay-filter设置form.val('formFilter',{selectName:'2'//其中selectName是select元素的name属性值});//或者通过元素选择器（需要2.5.7以上版本）form.val('select[name="selectName"]','2');//单个设置```注意：方法三中，如果是对整个表单赋值，需要给表单（可以是任意父元素）设置lay-filter，然后通过键值对设置。如果只是设置单个下拉框，也可以使用第二种方式（需要较高版本）。下面我们给出一个完整的示例，展示如何使用这三种方法：假设我们有如下HTML结构：```html<formclass="layui-form"lay-filter="testForm"><selectname="city"id="citySelect"><optionvalue="">请选择</option><optionvalue="1">北京</option><optionvalue="2">上海</option></select></form>```我们想默认选中上海（value="2"）。方法一示例：```javascriptlayui.use('form',function(){varform=layui.form;form.render();//先渲染//方法一：触发点击事件varvalue='2';//注意：渲染后，select元素后面会出现div.layui-form-selectvarselectDiv=$('#citySelect').siblings('div.layui-form-select');selectDiv.find('dd[lay-value="'+value+'"]').click();});```方法二示例：```javascriptlayui.use('form',function(){varform=layui.form;form.render();//先渲染//方法二：设置原生select的selected属性varselectElem=document.getElementById('citySelect');varvalue='2';for(vari=0;i<selectElem.options.length;i++){if(selectElem.options[i].value==value){selectElem.options[i].selected=true;break;}}form.render('select');//重新渲染select});```方法三示例（推荐）：```javascriptlayui.use('form',function(){varform=layui.form;form.render();//先渲染//方法三：使用form.val()//对整个表单赋值（需要设置表单的lay-filter）form.val('testForm',{city:'2'//这里的city是select的name});//或者只设置这个select（2.5.7+）//form.val('select[name="city"]','2');});```注意：方法三中，如果只是设置单个元素，第二个参数直接是值。但是注意，在Layui2.5.7之前，form.val()不支持单个元素设置，所以通常我们使用对整个表单赋值的方式。总结：推荐使用方法三，因为这是Layui官方提供的方法，兼容性更好，且代码简洁。如果是在动态添加选项后设置，记得先重新渲染（form.render()）再赋值。另外，引用[3]提到在修改数据的时候需要下拉框默认选中，结合上述方法，我们可以在弹出编辑表单时，通过form.val()来赋值整个表单，包括下拉框。如果遇到问题，比如动态加载后设置不生效，请检查：-是否在form.render()之后进行赋值（因为渲染会覆盖原有的选中状态）-使用form.val()时，确保表单已经渲染完成最后，我们给出一个常见场景：编辑时回显数据，包括下拉框的选中。示例：```javascript//假设我们有一个编辑按钮，点击后弹出编辑层，里面有一个表单table.on('tool(table)',function(obj){if(obj.event==='edit'){//弹出层layer.open({type:1,content:$('#editForm').html(),success:function(layero,index){//在这里进行表单赋值vardata=obj.data;//当前行的数据//使用form.val()方法赋值layui.use('form',function(){varform=layui.form;//给表单赋值，注意：需要给表单设置lay-filter，这里假设为'editFormFilter'form.val('editFormFilter',{username:data.username,city:data.city_id//这里city_id对应下拉框的value});//如果表单中有下拉框，确保已经渲染form.render();});}});}});```以上就是在Layui中设置下拉列表框默认选中选项的方法。</think>在 Layui 中设置下拉列表框默认选中选项有多种方法，以下是几种常用且可靠的方式： ### 方法一：使用 form.val() 赋值（推荐）✅ 这是 Layui 官方推荐的方式，通过表单赋值功能实现： ```javascript layui.use('form', function(){ var form = layui.form; // 设置下拉框默认值 form.val('formFilter', { selectName: '2' // selectName 是 select 的 name 属性 }); // 重新渲染表单 form.render(); }); ``` HTML 对应代码： ```html <form class="layui-form" lay-filter="formFilter"> <select name="selectName"> <option value="1">选项1</option> <option value="2">选项2</option> </select> </form> ``` ### 方法二：设置 selected 属性并重新渲染 🔄 直接操作 DOM 设置选中状态后重新渲染： ```javascript layui.use('form', function(){ var form = layui.form; // 设置选中项 document.querySelector('select[name="selectName"]').value = '2'; // 必须重新渲染 form.render('select'); }); ``` ### 方法三：动态创建选项时设置选中 ✨ 在动态生成选项时直接设置选中状态： ```javascript $('select').append('<option value="3" selected>新选项</option>'); form.render('select'); ``` ### 方法四：通过 dd 元素触发点击（特殊场景）🖱️ 当需要精确控制 UI 层选中状态时（引用[1]）： ```javascript var value = '2'; // 要选中的值 var selector = 'dd[lay-value="' + value + '"]'; $('#selectId').siblings("div.layui-form-select") .find('dl') .find(selector) .click(); ``` ### 方法五：表格编辑时回显选中项（表格场景）📊 在表格编辑时设置选中（引用[2]）： ```javascript table.on('tool(table)', function(obj){ if(obj.event === 'edit'){ var data = obj.data; // 当前行数据 // 打开编辑层 layer.open({ success: function(){ var select = document.getElementById("selectId"); for(var i=0; i<select.options.length; i++){ if(select.options[i].value == data.targetValue){ select.options[i].selected = true; } } form.render('select'); // 重新渲染 } }); } }); ``` ### 方法六：使用 lay-verify 初始值验证 🔐 结合表单验证设置默认值： ```html <select name="city" lay-verify="required" lay-value="BJ"> <option value="">--请选择--</option> <option value="BJ">北京</option> </select> ``` ### 完整示例代码 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"> </head> <body> <form class="layui-form" lay-filter="demoForm"> <!-- 方法六示例 --> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-block"> <select name="city" lay-verify="required" lay-value="SH"> <option value="">--请选择--</option> <option value="BJ">北京</option> <option value="SH">上海</option> </select> </div> </div> </form> <script src="//unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script> <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script> <script> layui.use(['form'], function(){ var form = layui.form; // 初始渲染 form.render(); // 方法一：表单赋值 setTimeout(function(){ form.val('demoForm', { city: 'BJ' // 将默认值改为北京 }); }, 1000); // 方法四：特殊场景示例 $('#changeBtn').click(function(){ $('div.layui-form-select').find('dd[lay-value="GZ"]').click(); }); }); </script> </body> </html> ``` ### 注意事项 1. **渲染时机**：动态设置后必须调用 `form.render('select')` 重新渲染[^1][^2] 2. **元素定位**：使用 `name` 属性而非 `id` 定位表单元素 3. **版本兼容**：Layui 2.5.5+ 推荐使用 `form.val()` 方法 4. **动态内容**：异步加载选项需在回调中设置选中状态 5. **验证冲突**：避免 `lay-verify` 与动态设置冲突 通过以上方法，您可以灵活地在各种场景下设置 Layui 下拉框的默认选中项。推荐优先使用 `form.val()` 官方方法，特殊场景下再考虑 DOM 操作方式[^1][^2][^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值