python 模糊查询下拉框_写了一个可以通过调后台接口实现模糊查询的下拉框（因为layui.js不满足需求）。...

今天遇到一个问题，就是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群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码：