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

最新推荐文章于 2024-05-20 10:55:59 发布
最新推荐文章于 2024-05-20 10:55:59 发布
阅读量5.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38007940/article/details/85467040
版权

思路分析：当我使用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 +"\" οnclick=\"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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于layui的下拉搜索框异步加载数据的解决方法
10-16
今天小编就为大家分享一篇关于layui的下拉搜索框异步加载数据的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui 表格搜索框 动态加载数据
qq_36202485的博客
07-13 3万+
inpunt 框如下&lt;li&gt; &lt;div class="layui-input-block" style="float: left; position: relative;"&gt; &lt;label class="layui-form-label"&gt;订单搜索&lt;/label&gt; &lt;input style=&quot
layui搜索选择框获取搜索内容
最新发布
BADmhy的博客
05-20 243
【代码】layui搜索选择框获取搜索内容。
记录Layui-select中的搜索下拉框lay-search相关的使用(对于初次使用是真的难顶)
热门推荐
Zachariahs的博客
08-20 4万+
对于一个后端开发人员来说,常用的easyUI,miniUI,bootstrap,layUI等前端整合式的UI框架能很好的提高页面美观程度以及开发效率 我个人在开发中,使用过miniUI,bootstrap,layUI,其中miniUI是在公司开发时公司要求学习使用的,个人写东西还是偏重于layUI和bootstrap,毕竟看着漂亮点. 本次记录的...
Layui带搜索的下拉框的使用以及动态数据绑定
qq_44211323的博客
06-18 1万+
说起下拉框大家一定不陌生，就是放着指定内容的容器需要什么就直接选择就可以了，很方便。但是凡事都有利弊两面，在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花，影响用户体验。所以就有了带查询的下拉框出现，这个下拉框的功能很强大，结合了输入框和下拉框为一体，既可以进行模糊查询，又可以直接选择，比以前的下拉框更加方便了。今天要介绍的就是layui的form表单组件里的带查询的下拉框。 ...
layui_可搜索的下拉框_数据渲染
winnieFighting
03-29 1万+
前言 最近在使用layui做项目，小编在这里总结一下layui框架下的可搜索的下拉框。 正文 添加框架需要的行区块结构 添加下拉框，设置lay-search属性 渲染数据 首先，作为layui 的一个样式，除了添加css样式和js样式，还需要我们在一个form里添加下拉框，不然不会有效果。 需要在这两个结构下，带搜索的下拉框才会出现。 然后，我们在下拉框控件中，添加lay-search属性。 ...
Layui带搜索的下拉框的使用以及动态数据绑定方法
10-16
今天小编就为大家分享一篇Layui带搜索的下拉框的使用以及动态数据绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
动态从后台获取数据实现搜索下拉框
08-02
在IT行业中，动态从后台获取数据并实现搜索下拉框是一项常见的前端开发任务，它涉及到网页交互、数据传输以及用户界面的设计。这个功能通常应用于表单填写、筛选或导航等场景，极大地提升了用户体验。下面我们将深入...
Layui下拉框样式动态加载不出现数据的问题
weixin_44579862的博客
08-18 3888
之前遇到过这样一个问题，就是使用layui下拉框的时候，因为下拉框的数据是动态加载的，当在页面刷新数据时，layui下拉框的样式在，但是需要加载的数据却不显示，刚开始的时候以为以为是数据不绑定的问题，去掉layui样式时却可以显示数据，所以数据时绑定的，后来又尝试了静态加载数据，发现数据和样式都可以显示出来，那么我认为是加载时候出现了问题，我觉得应该是加载的时候起了冲突，以至于显示不出来数据。 一...
layui动态表格 动态查询数据
逗比爱好者
05-22 4469
layui 表格显示以及 用input查询table表格 ## 首先定义一个文本框和一个搜索 注意搜索按钮里的 data-type="reload" 和input id <div class="layui-form-item"> <div class="layui-inline">...
Layui------动态加载表格_1（点击搜索按钮获取表格）
Alien-Hu
07-17 4450
文章目录 原始layui动态表格模板案例： https://www.layui.com/demo/table/reload.html 经过学习之后，稍微有些自己的心得，把最终学习结果总结一下，方便前端新人查阅 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit...
layui搜索下拉框数据的动态绑定
weixin_44763654的博客
11-03 2055
前台页 HTML样式 <div class="layui-input-inline"> <select name="modules" id="nameselect" lay-search="" lay-verify="required"> </select> </div> js代码 function LayuiCreateSelect(selectId, url, value)
使用layui的的下拉框并回填和开启搜索
weixin_44554896的博客
05-06 2998
一、完成HTML布局并开启搜索功能 开启layui下拉框的搜索功能很简单，只需要设定属性lay-search即可开启。 <div class="layui-inline"> <label class="layui-form-label">用户类型</label> <div class="layui-input-inline"...
echarts异步数据加载(在下拉框选择事件中异步更新数据)
weixin_34174132的博客
01-22 1233
接触echarts 大半年了,从不会到熟练也做过不少的图表，隔了一段时间没使用这玩意，好多东西真心容易忘了。在接触echarts这期间也没有总结什么东西，今天我就来总结一下如何在echart中异步加载数据，在实际的工作的中对数据的刷选非常常见，比如在下拉框中选择，时间选择等的一些事件中异步加载数据。一个很常见的筛选如图： 下面我就直接用代码来实现怎样...
layui框架使用 xmselect 数据异步加载，可搜索数据 监听选择动作
masterphp的博客
12-09 3441
layui框架使用 xmselect 数据异步加载，可搜索数据 监听选择动作
Layui 异步加载select选择框数据
输入技术、输出想法
08-06 3275
页面效果 场景: 比如使用layui.table数据表格显示了所有项目数据，客户数据对应另外的表数据集合，现在需要修改客户名称，需要把数据回显到表单中，然后进行修改 实现 <div class="layui-form-item"> <label class="layui-form-label">客户名称</label> <div class="layui-input-block"> <select name="
layui.form.select 实现可下拉 可搜索 可输入
qq_42778518的博客
04-07 8209
layui.form.select 实现可下拉 可搜索 可输入
使用layui实现搜索功能
奇妙的Bug之旅
01-09 1440
在Web开发中，搜索功能是非常常见的需求。它可以帮助我们快速定位到所需的信息。本文将介绍如何使用layui框架实现搜索功能，并提供详细的步骤和代码示例。首先，我们需要在HTML文件中引入layui库。接下来，我们可以编写前端代码来实现搜索功能。
layui 下拉搜索框怎么写
05-19
在 layui 中，下拉搜索框可以通过下拉框组件 `select` 和表单组件 `form` 配合实现。 具体步骤如下： 1. 引入 `layui.css` 和 `layui.js` 文件： ```html <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css"> <script src="//cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.js"></script> ``` 2. 在页面中添加下拉搜索框的 HTML 代码： ```html <div class="layui-form-item"> <label class="layui-form-label">下拉搜索框</label> <div class="layui-input-inline"> <select id="search-select" lay-search=""> <option value="">请选择</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> <option value="5">杭州</option> </select> </div> </div> ``` 其中，`lay-search` 属性表示开启搜索功能，`option` 标签中的 `value` 值为选项的值，`option` 标签中的文本为选项的显示文本。 3. 在页面底部添加 JavaScript 代码： ```html <script> layui.use(['form'], function() { var form = layui.form; // 监听下拉框的选中事件 form.on('select(search-select)', function(data) { console.log(data.value); // 输出选中的值 }); }); </script> ``` 通过 `layui.use` 方法加载 `form` 模块，监听下拉框的选中事件，并输出选中的值。 以上就是 layui 下拉搜索框的实现方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值