纯js代码生成可搜索选择下拉列表的实例


Posted in Javascript onJanuary 11, 2018

1、因为动态的css楼主写不出来,因此需要引入layui中的css样式:<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >;

2、需要引入jquery-1.8.3.js版本的jquery

话不多说,代码实现如下:

var selectData={};//下拉列表总数据
/**
 * 下拉搜索,多选择等
 */
$.fn.selectDataFun=function (json) {
  selectData[$(this).attr("id")]={thisDom:null,initData:null,jsonData:null,htmlText:null,
    isShow:true,selectElements:true,overStat:true,checkedElementIds:''};
  thisSelectFun($(this)).thisDom=$(this);//设置索引为id,值为本身对象
  thisSelectFun($(this)).initData=json;//初始数据为json
/*  var isShow=true;//是否显示
  var selectElements;//选择的选项
  var overStat=true;//鼠标经过的状态
  var checkedElementIds='';//选中项的id*/
  //根据字段生成html代码
  setFieldTypeFun($(this));
  //请求后台数据
  getSelectDataFun($(this));
  //生成下拉列表
  thisSelectFun($(this)).htmlText = createSelectFun($(this));//htmlText为缓存的html代码
  //调用总方法
  callMethodFun($(this));
}
//根据对象id值获取对象数据
function thisSelectFun(thisD) {
  if(thisD.attr("id")==''){
    alert("id值为空");
    return null;
  }
  return selectData[thisD.attr("id")]
}
//根据对象字段生成html代码
function setFieldTypeFun(thisD){
  var thisId=thisD.attr("id");
  var fields = selectData[thisId].initData;//以id获取该对象的所有数据
  //生成html代码
  var title=fields.title;
  var inputId=fields.inputId;
  var selectHtml='<div class="layui-form-select">'+'<div class="layui-select-title">'+
      '<input type="hidden" id="'+inputId+'" name="'+inputId+'" />'+
    '<span>'+title+':</span>'+' '+'<input id="'+thisD.attr("id")+'Search" value="" hiddenValue="" class="form-control input-sm" type="text">'+
    '<i class="layui-edge"></i>'+'</div>'+'<dl class="layui-anim layui-anim-upbit" id="'+thisD.attr("id")+'dl" style=""></dl>'+
    '</div>';
  thisD.append(selectHtml);
}
//请求后台数据
function getSelectDataFun(thisD) {
  var fields = selectData[thisD.attr("id")].initData;//以id获取该对象的所有数据
  //判断数据ajaxUrl中是否含有url字段
  if(fields.ajaxUrl.hasOwnProperty('url')){
    //以请求路径为url请求后台数据,并赋值给jsonData
    thisSelectFun(thisD).jsonData=ajaxFunss(fields.ajaxUrl);
  }else {
    if($.isEmptyObject(thisSelectFun(thisD).jsonData)){
      thisSelectFun(thisD).jsonData={ code: 0, msg: "获取成功", count: 0,data:new Array()};
    }
  }
}
//请求后台数据
function ajaxFunss(json) {
  json['async']=false;
  json['dataType']='json';
  json['type']='post';
  var layerLoadIndex = layer.load(1); //换了种风格
  var resultData=$.ajax(json);//发送请求
  layer.close(layerLoadIndex);
  if(resultData.status==200){//请求后台数据成功
    return resultData.responseJSON;
  }else {
    return null;
  }
}
//生成下拉列表
function createSelectFun(thisD) {
  var json=thisSelectFun(thisD).jsonData;
  var html='';
  for(var n in json){
    html+='<dd lay-value="'+json[n].id+'" class="">'+json[n].name+'</dd>';
  }
  var id=thisD.attr("id")+'dl';
  $("#"+id).append(html);
  return html;
}
//调用总方法
function callMethodFun(thisD) {
  var iDom=thisD.find(".layui-edge").eq(0);//i元素,eq为等于的意思
  var divDom = thisD.find(".layui-form-select").eq(0);//下拉列表所在的div
  /* var isShow = thisSelectFun(thisD).isShow;//是否显示
  var selectElement = thisSelectFun(thisD).selectElements;//选中的选项
  var overStat = thisSelectFun(thisD).overStat;//鼠标经过和离开状态
  var checkedElementIds = thisSelectFun(thisD).checkedElementIds;//隐藏输入框的value值*/
  //小三角符号绑定点击方法
  iDom.click(function () {
    if(thisSelectFun(thisD).isShow){
      thisSelectFun(thisD).isShow=false;
      divDom.addClass("layui-form-selected");//显示下拉列表
    }else {
      thisSelectFun(thisD).isShow=true;
      divDom.attr("class","layui-form-select");//隐藏下拉列表
    }
  });
  //dl元素绑定点击方法
  var dlDom=thisD.find("dl").eq(0);
  var searchId = thisD.attr("id")+'Search';//搜索框id
  dlDom.on("click",'dd',function () {
    if(thisSelectFun(thisD).initData.selectType) {
      //多选
      if (thisSelectFun(thisD).selectElements) {
        thisSelectFun(thisD).selectElements = false;
        $(this).addClass("layui-this");//设置勾选状态
        var text = $("#" + searchId).val();//输入框的内容
        var selectText = $(this).text() + ",";//选择的选项
        var checkedId = $(this).attr("lay-value") + ",";//获取选项的id
        if (text.indexOf(selectText) != -1) {//判断输入框中的内容是否包含有所选的选项
          return;
        }
        thisSelectFun(thisD).checkedElementIds += checkedId;
        $("#" + searchId).val(text + selectText);
      } else {
        thisSelectFun(thisD).selectElements = true;
        $(this).attr("class", "");//清空勾选状态
        var val = $(this).text() + ",";//勾选的选项
        var checkedId = $(this).attr("lay-value") + ',';//获取选项的id
        var text = $("#" + searchId).val().replace(val, "");//清除勾选的选项
        $("#" + searchId).val(text);//设置
        thisSelectFun(thisD).checkedElementIds = thisSelectFun(thisD).checkedElementIds.replace(checkedId, "");//清除勾选的选项
      }
    }else {
      //单选
      //获取已经选中的选项,并清除
      var ddDom=thisD.find(".layui-this").eq(0);
      ddDom.attr("class","");//清除
      $(this).addClass("layui-this");//设置勾选状态
      var selectText = $(this).text();//选择的选项
      var checkedId = $(this).attr("lay-value");//获取选项的id
      thisSelectFun(thisD).checkedElementIds = checkedId;
      $("#" + searchId).val(selectText);
      divDom.attr("class","layui-form-select");//隐藏下拉列表
  }
    var hiddenId=selectData[thisD.attr("id")].initData.inputId;//隐藏输入框id
    $("#"+hiddenId).val(thisSelectFun(thisD).checkedElementIds.substring(0,thisSelectFun(thisD).checkedElementIds.length-1));
  })
  //鼠标经过时
  dlDom.mouseover(function () {
    thisSelectFun(thisD).overStat=false;
  });
  //鼠标离开时
  dlDom.mouseout(function () {
    thisSelectFun(thisD).overStat=true;
  });
  //鼠标松开时
  $("body").mouseup(function () {
    if(thisSelectFun(thisD).overStat==true){//并且overStat为true
      divDom.attr("class","layui-form-select");//隐藏下拉列表
    }
  });
  //搜索框键盘松开事件
  var searchDom = thisD.find("#"+searchId).eq(0);//搜索框对象
  searchDom.keyup(function () {
    searchFunssss(thisD,searchId,divDom,dlDom);
  });
}
//根据输入内容搜索出匹配的选项
function searchFunssss(thisD,searchId,divDom,dlDom) {
  var val=$("#"+searchId).val();//搜索框id
  if(val.length>0){
    var conText='';//符合条件的选项
    var searchStats=false;//是否搜索到
    var htmlText=thisSelectFun(thisD).htmlText;//缓存的html代码
    dlDom.children().each(function () {
      var thisText=$(this).text();
      var thisDom='<dd lay-value="'+$(this).attr("lay-value")+'" class="">'+thisText+'</dd>';
      if(val==thisText){
        conText+=thisDom;
        htmlText=htmlText.replace(thisDom,"");
        searchStats=true;
        var searchId = thisD.attr("id")+'Search';//搜索框id
        $("#"+searchId).val("");//清空搜索框
      }
    });
    htmlText=conText+htmlText;
    dlDom.children().remove();//删除其子节点
    dlDom.append(htmlText);
    if(searchStats){
      divDom.addClass("layui-form-selected");//显示下拉列表
    }
  }
}

以上js代码放在名称为selectFun.js的js文件中

调用如下:

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
  <title>test</title>
  <meta name="decorator" content="default"/>
  <link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
  <script src="${ctxStatic}/selectFun.js" charset="utf-8"></script>
  <script type="text/javascript">
   $(document).ready(function() {
      $("#busgateDiv").selectDataFun({
        ajaxUrl:{url:'${ctx}/goods/goods/getStat',where:{}},//请求后台数据的路径
        selectType:true,//true多选,false单选
        title:'商品状态',//字段中文名称
        inputId:'busgate'//实体类字段
      });
      $("#sortDiv").selectDataFun({
        ajaxUrl:{url:'${ctx}/goods/goods/getSortname',where:{}},
        selectType:true,
        title:'商品大类',
        inputId:'sort'
      });
    });
  </script>
</head>
<body class="gray-bg">
  <div class="row">
  <div class="col-sm-12">
  <form:form id="searchForm" modelAttribute="goods" action="${ctx}/goods/goods/dataListFun" method="post" class="form-inline">
   <div class="form-group">
     <span>商品名称:</span>
      <form:input path="name" htmlEscape="false" maxlength="80" class=" form-control input-sm"/>
     <span>商品代码:</span>
      <form:input path="code" htmlEscape="false" maxlength="80" class=" form-control input-sm"/>
     <span>商品条码:</span>
      <form:input path="code2" htmlEscape="false" maxlength="30" class=" form-control input-sm"/>
    </div>
   <br/><br/>
   <div class="form-group">
     <div class="layui-inline" id="sortDiv">
     </div>
     <div class="layui-inline" id="busgateDiv">
     </div
   </div>
  </form:form>
  <br/>
  </div>
  </div>
  
</body>
</html>

纯js代码生成可搜索选择下拉列表的实例

纯js代码生成可搜索选择下拉列表的实例

以上这篇纯js代码生成可搜索选择下拉列表的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 #Javascript
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
JS计算两个时间相差分钟数的方法示例
Jan 10 #Javascript
Vuex 入门教程
Jan 10 #Javascript
js实现上传并压缩图片效果
Jan 10 #Javascript
web前端vue之CSS过渡效果示例
Jan 10 #Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
php 获取客户端的真实ip
2009/11/30 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
什么是跨站脚本攻击
2014/12/11 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
五年级音乐教学反思
2014/02/06 职场文书
2014全国两会心得体会
2014/03/17 职场文书
小学课外活动总结
2014/07/09 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS