关于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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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 文本文件的读取效率
2012/02/10 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
原生JS实现天气预报
2020/06/16 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
python使用psutil模块获取系统状态
2016/08/27 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
django 环境变量配置过程详解
2019/08/06 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python3 集合set入门基础
2020/02/10 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
体育教师自荐信范文
2013/12/16 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python