摘要:今天遇到一个问题,就是的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。实现思路其实就是,模仿的下拉框样式,然后监听的输入事件,一旦输入,就调接口,让后台返给我查到的数据。
今天遇到一个问题,就是layui.js的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。
实现思路其实就是,模仿layui.js的下拉框样式,然后监听input的输入事件,一旦输入,就调接口,让后台返给我查到的数据。
还是上代码吧:
html:
css:
body { background-color: #dcdbdb; } .box { width: 150px; } .select-container { position: relative; } .select-container > ul, .select-container > ul li { list-style: none; } .select-container > .select-title { position: relative; } .select-container > .select-title > .select-search-input { height: 38px; border: 1px solid #e6e6e6; background-color: #ffffff; outline: none; border-radius: 2px; cursor: pointer; padding-left: 10px; padding-right: 22px; width: 100%; display: block; box-sizing: border-box; } .select-icon { position: relative; display: inline-block; vertical-align: middle; width: 0; height: 0; border-width: 6px; border-style: dashed; border-color: transparent; overflow: hidden; } .select-container > .select-title > .select-icon { position: absolute; right: 10px; top: 50%; cursor: pointer; border-top-color: #c2c2c2; border-top-style: solid; transition: all 0.3s; margin-top: -3px; } .select-container > .select-title > .select-up { margin-top: -9px; transform: rotate(180deg); } .select-container > .select-items { position: absolute; left: 0; top: 32px; padding: 5px 0; z-index: 899; min-width: 100%; border: 1px solid #d2d2d2; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); box-sizing: border-box; } .select-container > .select-items { display: none; } .select-container > .select-items .select-option { padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: 0.5s all; background-color: #f2f2f2; } .select-container > .select-items .select-option:hover { background-color: #5fb878; color: #fff; } .select-container > .select-items > .select-this { background-color: #5fb878; color: #fff; }
js:
/* * function:the ajax * params:interface url,request method,paramns,callback function */ function ewAjax(url, method, params, callback) { method = method.toUpperCase() === "GET" ? "GET" : "POST"; var xhr = new XMLHttpRequest(); if (method.toUpperCase() === "GET") { if (params) { url = url + params; } xhr.open(method, url); xhr.send(); } else { if (typeof params === "string" && params) { xhr.open(method, url + "?" + params); xhr.send(JSON.stringify(params)); } else if (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:Serialization parameters * params:params */ function ewParam(params) { var keys = Object.keys(params), key_len = keys.length; var str = ""; for (var key in params) { str += key + "=" + params[key]; if (key === keys[key_len - 1]) { break; } else { str += "&"; } } return str; } /* * function:create the select component * params:params */ function createSelect(el1, el2, callback) { el1.oninput = function(e) { // get data ewAjax(url,"POST",ewParam({name: e.target.value}),function(res) { if (res.status === "200") { callback(res.data, el1, el2); } }); }; } var search_input = document.getElementsByClassName( "select-search-input" )[0], select_items = document.getElementsByClassName("select-items")[0]; createSelect(search_input, select_items, function(data, el1, el2) { var li; if (data.length > 0) { el2.style.display = "block"; el2.innerHTML = ""; el1.nextElementSibling.classList.add("select-up"); // click the select arrow 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"); // the value need to subbmit li.setAttribute("data-value", d.id); // maybe you need to save the data by search li.setAttribute("data-info", JSON.stringify(d)); li.textContent = d.name; li.className = "select-option"; // the default select value 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"); //change the value about submit the form data,so create a hidden input element var sm_input = document.createElement("input"); sm_input.style.display = "none"; sm_input.name = "name"; sm_input.value = this.getAttribute("data-value"); el1.parentElement.appendChild(sm_input); }; el2.appendChild(li); }); } });
其实整体思路也不算太难,无非就是当后台返给了数据之后,然后列表显示,给列表项添加点击事件,关于这个,给下拉箭头添加事件,控制列表的显隐,然后就没有什么了,分享出来,希望能帮助到跟我碰到一样的情况无法着手的人。代码已上传至git源码,觉得不错希望点个star,多谢。
鄙人创建了一个QQ群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54709.html
摘要:今天遇到一个问题,就是的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。实现思路其实就是,模仿的下拉框样式,然后监听的输入事件,一旦输入,就调接口,让后台返给我查到的数据。 今天遇到一个问题,就是layui.js的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。 实现思路其实就是,模仿layui.js的下拉框样式,然后监听input的输入事件,一...
摘要:今天遇到一个问题,就是的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。实现思路其实就是,模仿的下拉框样式,然后监听的输入事件,一旦输入,就调接口,让后台返给我查到的数据。 今天遇到一个问题,就是layui.js的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。 实现思路其实就是,模仿layui.js的下拉框样式,然后监听input的输入事件,一...
摘要:做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。这样体验具有层次感,而且用户不会因为一大堆条件输入框而感到厌烦。避免全部页面,只用局部。 做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。 用户体验说起来是一个比较模糊的概念,但是又是实实在在...
摘要:做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。这样体验具有层次感,而且用户不会因为一大堆条件输入框而感到厌烦。避免全部页面,只用局部。 做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。 用户体验说起来是一个比较模糊的概念,但是又是实实在在...
摘要:简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是和,其它参考插件使用。当时,加载中的提示就会出现。后端返回的数据如上图,并不是所有的字段都是可以进行搜索的字段。 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发。简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-...
阅读 1572·2021-11-23 09:51
阅读 1159·2019-08-30 13:57
阅读 2214·2019-08-29 13:12
阅读 1986·2019-08-26 13:57
阅读 1141·2019-08-26 11:32
阅读 909·2019-08-23 15:08
阅读 665·2019-08-23 14:42
阅读 3051·2019-08-23 11:41