寫了一個可以通過調後臺介面實現模糊查詢的下拉框（因為layui.js不滿足需求）。

夕水發表於2019-02-16
UIJS

今天遇到一個問題，就是layui.js的下拉框模糊查詢功能並不能滿足我的需求，因此我動手自己寫了一個下拉框。

實現思路其實就是，模仿layui.js的下拉框樣式，然後監聽input的輸入事件，一旦輸入，就調介面，讓後臺返給我查到的資料。

還是上程式碼吧:

html:

<form action="">
  <div class="box">
    <div class="select-container">
      <div class="select-title">
        <input type="text" class="select-search-input" />
        <i class="select-down select-icon"></i>
      </div>
      <ul class="select-items"></ul>
    </div>
  </div>
  <button class="submit" type="submit">提交</button>
</form>

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,多謝。

相關文章