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

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");//显示下拉列表
    }
  }
}

<%@ 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>