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

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代码生成可搜索选择下拉列表的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • js实现带搜索功能的下拉框实时搜索实时匹配
  • js实现可输入可选择的select下拉框
  • JS实现支持多选的遍历下拉列表代码
时间: 2018-01-10

js实现带搜索功能的下拉框实时搜索实时匹配

1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT

js实现可输入可选择的select下拉框

本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1.原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方,当点击页面中的空白地方,div隐藏. 1.3代码: <!doctype html> <html lang="en"> <head> <meta charset="

JS实现支持多选的遍历下拉列表代码

本文实例讲述了JS实现支持多选的遍历下拉列表.分享给大家供大家参考.具体如下: 这里使用js实现可进行多项选择的下拉列表,鼠标点击上边下拉列表中的任意值,下边列表中就会显示该选中值,按住键盘上的Ctrl键,再次点击上边的列表任意值,可进行多选,多选功能得益于JavaScript的帮忙,在网页上这种应用挺广泛,有必要看一看. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-option-cha-codes/ 具体代码如下: <!

js 复制功能 支持 for IE/FireFox/mozilla/ns

FF,不支持复制功能,要支持的话,很难的 js 复制功能 支持 for IE/FireFox/mozilla/ns 代码如下: 这里有两各上方式 : // js 复制功能 支持 for IE/FireFox/mozilla/ns function copy_clip(meintext) { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netsc

vue表单绑定实现多选框和下拉列表的实例

在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: <label>测试多选渲染:</label> <div> <template v-for="item in chks"> <input type="checkbox" name="hobby" :value="item.id" :checked="loopsss

基于JS实现checkbox全选功能实例代码

需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

JS实现鼠标框选效果完整实例

本文实例讲述了JS实现鼠标框选效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; char

flex复选框和下拉列表的几种用法整理

这几天接触了flex的很多控件,让我印象最深刻的就是控件的数据绑定几乎所有控件都可以这样做,基本上来说原理和html一样,我自己闲暇时间就整理了有关复选框可下拉的几种用法,下面就给大家分享一下. 1.复选框 这里我主要研究的该控件的全选,全不选,反选以及选中的操作,原理也就是也能用selected这个属性,true表示选中,只需遍历就能实现,此处我使用的是动态的复选框,页面代码如下 复制代码 代码如下: <mx:VBox top="50"> <mx:VBox>

js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

基于bootstrap-datetimepicker.js不支持IE8的快速解决方法

实例如下: if (!Array.prototype.indexOf) Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len;

js实现当复选框选择匿名登录时隐藏登录框效果

本文实例讲述了js实现当复选框选择匿名登录时隐藏登录框效果.分享给大家供大家参考.具体如下: 本技巧是比较常见的,有些网站可以登录发帖或匿名发帖,当勾选复选框选择匿名发帖时,登录框自动隐藏了,是不是更人性化了?这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-nm-login-submit-codes/ 具体代码如下: <title>当复

JS+DIV+CSS实现仿表单下拉列表效果

本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE