关于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图片切换效果实现代码
Sep 24 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
微信小程序实现人脸识别
May 25 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
实例讲解React 组件
Jul 07 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
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
Python代码解决RenderView窗口not found问题
2016/08/28 Python
使用Scrapy爬取动态数据
2018/10/21 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python:动态路由的Flask程序代码
2019/11/22 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
社区工作者思想汇报
2014/01/13 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
写给医院的感谢信
2015/01/22 职场文书
讲座新闻稿
2015/07/18 职场文书
导游带团欢迎词
2015/09/30 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
详解JS数组方法
2021/11/20 Javascript
小程序实现侧滑删除功能
2022/06/25 Javascript