关于layui的下拉搜索框异步加载数据的解决方法


Posted in Javascript onSeptember 28, 2019

思路分析:当我使用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" rel="external nofollow" >
  <link rel="stylesheet" href="statics/css/xadmin.css" rel="external nofollow" >
</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>

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

以上这篇关于layui的下拉搜索框异步加载数据的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
js实现分割上传大文件
Mar 09 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
JavaScript实现网页动态生成表格
Nov 25 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 #Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 #Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 #Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 #Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 #Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 #Javascript
使用layer模态框给新页面传值的方法
Sep 27 #Javascript
You might like
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
浅析Python基础-流程控制
2016/03/18 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
详解python程序中的多任务
2020/09/16 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
AJAX都有哪些有点和缺点
2012/11/03 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
教师自我鉴定
2013/12/13 职场文书
高三学生评语大全
2014/04/25 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
同事欢送会致辞
2015/07/31 职场文书