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