純js代碼生成可搜索選擇下拉列表

1、因為動態的css樓主寫不出來，因此需要引入layui中的css樣式：<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css">；

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">
   <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>