自己写了一个下拉框，可以通过调整后台界面实现模糊查询（因为layui.js不符合要求）

时间：2023-03-31 11:58:03 CSS

今天遇到一个问题，就是layui.js中下拉框的模糊查询功能不能满足我的需求，于是自己写了一个下拉框。实现思路其实就是模仿layui.js的下拉框样式，然后监听input的输入事件。输入一次，调整界面，让后台返回我查到的数据。还是上代码吧:html:

提交css:body{background-color:#dcdbdb;}.box{width:150px;}.select-container{位置：相对；}.select-container>ul,.select-container>ulli{list-style:none;}.select-container>.select-title{position:relative;}.select-container>.select-标题>.select-search-input{高度：38px；边框：1px实心#e6e6e6；背景色：#ffffff；大纲：无；边界半径：2px；游标：指针；左填充：10px；填充右：22px；宽度：100%；显示：块；box-sizing:border-box;}.??select-icon{position:relative;显示：内联块；垂直对齐：中间；宽度：0；高度：0；边框宽度：6px；边框样式：虚线；边框颜色：透明；溢出：隐藏；}.select-container>.select-title>.select-icon{位置：绝对；右：10px；顶部：50%；游标：指针；边框顶部颜色：#c2c2c2；border-top-style:solid;过渡：全部0.3s；margin-top:-3px;}.select-container>.select-title>.select-up{margin-top:-9px;转换：旋转（180度）；}.select-container>.select-items{位置：绝对；左：0；顶部：32px；填充：5px0；z-指数：899；最小宽度：100%；边框：1px实心#d2d2d2；最大高度：300px；溢出-y：自动；背景色：#fff；边界半径：2px；盒子阴影：02px4pxrgba(0,0,0,0.12);box-sizing:border-box;}.??select-container>.select-items{显示：无；}.select-container>.select-items.select-option{padding:010px;行高：36px；空白：nowrap；溢出：隐藏；文本溢出：省略号；游标：指针；过渡：全部0.5s；背景颜色：#f2f2f2;}.select-container>.select-items.select-option:hover{背景颜色：#5fb878;颜色：#fff;}.select-container>.select-items>.select-this{background-color:#5fb878;color:#fff;}js:/**function:ajax*params:interfaceurl,requestmethod,paramns,callbackfunction*/functionewAjax(url,method,params,callback){method=method.toUpperCase()=复制代码==“得到”？“获取”：“发布”；varxhr=newXMLHttpRequest();if(method.toUpperCase()==="GET"){if(params){url=url+params;}xhr.open（方法，网址）；xhr.发送();}else{if(typeofparams==="string"&¶ms){xhr.open(方法,url+"?"+params);xhr.send(JSON.stringify(params));}elseif(params){xhr.open(method,url);xhr.send(JSON.stringify(params));}}xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){callback(JSON.parse(xhr.responseText));}};}/**function:序列化参数*params:params*/functionewParam(params){varkeys=Object.keys(params),key_len=keys.length;varstr="";for(varkeyinparams){str+=key+"="+params[key];if(key===keys[key_len-1]){break;}else{str+="&";}}returnstr;}/**函数：创建选择组件*params:params*/functioncreateSelect(el1,el2,callback){el1.oninput=function(e){//获取数据ewAjax(url,"POST",ewParam({name:e.target.value}),function(res){if(res.status==="200"){回调(res.data,el1,el2);}});};}varsearch_input=document.getElementsByClassName("select-search-input")[0],select_items=document.getElementsByClassName("select-items")[0];createSelect(search_input,select_items,function(data,el1,el2){varli;if(data.length>0){el2.style.display="block";el2.innerHTML="";el1.nextElementSibling.classList.add("select-up");//点击选择箭头el1.nextElementSibling.onclick=function(){this.classList.toggle("select-up");if(this.className.indexOf("select-up")>-1){el2.style.display="block";}else{el2.style.display="none";}};data.map(function(d,index){li=document.createElement("li");//需要提交的值li.setAttribute("data-value",d.id);//也许你需要通过搜索保存数据li.setAttribute("data-info",JSON.stringify(d));li.textContent=d.name;li.className="select-option";//默认选择值if(index===0){li.classList.add("select-this");}li.onclick=function(){el2.style.display="none";el1.value=this.textContent;el1.nextElementSibling.classList.remove("select-up");//改变提交表单数据的值，所以创建一个隐藏的输入元素varsm_input=document.createElement("输入");sm_input.style.display="无";sm_input.name="名称";sm_input.value=this.getAttribute("数据值");el1.parentElement.appendChild(sm_input);};el2.appendChild(li);});}});其实整体思路并不太难。无非就是后台返回数据后，然后显示列表，给列表项添加点击事件。关于这个，给下拉箭头添加一个事件，控制列表的显示，然后就没有了，分享一下，希望能帮助到和我遇到同样情况而无法上手的人.代码已经上传到git源码。我觉得还不错，希望给个star，谢谢。