纯js代码实现可搜索选择下拉列表方法

本文主要为大家分享一篇纯js代码生成可搜索选择下拉列表的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。

1、因为动态的css楼主写不出来，因此需要引入layui中的css样式：

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

话不多说，代码实现如下：

'+     '';   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+='

'+json[n].name+'

';   }   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 pDom = thisD.find(".layui-form-select").eq(0);//下拉列表所在的p   /* 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;       pDom.addClass("layui-form-selected");//显示下拉列表     }else {       thisSelectFun(thisD).isShow=true;       pDom.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);       pDom.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       pDom.attr("class","layui-form-select");//隐藏下拉列表     }   });   //搜索框键盘松开事件   var searchDom = thisD.find("#"+searchId).eq(0);//搜索框对象   searchDom.keyup(function () {     searchFunssss(thisD,searchId,pDom,dlDom);   }); } //根据输入内容搜索出匹配的选项 function searchFunssss(thisD,searchId,pDom,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='

'+thisText+'

';       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){       pDom.addClass("layui-form-selected");//显示下拉列表     }   } }

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

调用如下：

相关推荐：

easyUI下拉列表点击事件使用方法实例分享

jquery和css实现下拉列表功能教程

javascript对HTML下拉列表标签的操作

以上就是纯js代码实现可搜索选择下拉列表方法的详细内容，更多请关注php中文网其它相关文章！