国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

寫了一個可以通過調(diào)后臺接口實現(xiàn)模糊查詢的下拉框(因為layui.js不滿足需求)。

scola666 / 1748人閱讀

摘要:今天遇到一個問題,就是的下拉框模糊查詢功能并不能滿足我的需求,因此我動手自己寫了一個下拉框。實現(xiàn)思路其實就是,模仿的下拉框樣式,然后監(jiān)聽的輸入事件,一旦輸入,就調(diào)接口,讓后臺返給我查到的數(shù)據(jù)。

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

實現(xiàn)思路其實就是,模仿layui.js的下拉框樣式,然后監(jiān)聽input的輸入事件,一旦輸入,就調(diào)接口,讓后臺返給我查到的數(shù)據(jù)。

還是上代碼吧:

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);
          });
        }
      });
      
      

    其實整體思路也不算太難,無非就是當后臺返給了數(shù)據(jù)之后,然后列表顯示,給列表項添加點擊事件,關(guān)于這個,給下拉箭頭添加事件,控制列表的顯隱,然后就沒有什么了,分享出來,希望能幫助到跟我碰到一樣的情況無法著手的人。代碼已上傳至git源碼,覺得不錯希望點個star,多謝。

    鄙人創(chuàng)建了一個QQ群,供大家學習交流,希望和大家合作愉快,互相幫助,交流學習,以下為群二維碼:

    文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/100055.html

    相關(guān)文章

    • 寫了一個可以通過調(diào)后臺接口實現(xiàn)模糊查詢下拉因為layui.js滿足需求)。

      摘要:今天遇到一個問題,就是的下拉框模糊查詢功能并不能滿足我的需求,因此我動手自己寫了一個下拉框。實現(xiàn)思路其實就是,模仿的下拉框樣式,然后監(jiān)聽的輸入事件,一旦輸入,就調(diào)接口,讓后臺返給我查到的數(shù)據(jù)。 今天遇到一個問題,就是layui.js的下拉框模糊查詢功能并不能滿足我的需求,因此我動手自己寫了一個下拉框。 實現(xiàn)思路其實就是,模仿layui.js的下拉框樣式,然后監(jiān)聽input的輸入事件,一...

      Ververica 評論0 收藏0
    • 寫了一個可以通過調(diào)后臺接口實現(xiàn)模糊查詢下拉因為layui.js滿足需求)。

      摘要:今天遇到一個問題,就是的下拉框模糊查詢功能并不能滿足我的需求,因此我動手自己寫了一個下拉框。實現(xiàn)思路其實就是,模仿的下拉框樣式,然后監(jiān)聽的輸入事件,一旦輸入,就調(diào)接口,讓后臺返給我查到的數(shù)據(jù)。 今天遇到一個問題,就是layui.js的下拉框模糊查詢功能并不能滿足我的需求,因此我動手自己寫了一個下拉框。 實現(xiàn)思路其實就是,模仿layui.js的下拉框樣式,然后監(jiān)聽input的輸入事件,一...

      seal_de 評論0 收藏0
    • 前端交互體驗優(yōu)化若干點

      摘要:做前端也有一段時間了,對于實現(xiàn)各種需求來說已經(jīng)是游刃有余了,代碼的質(zhì)量和可擴展性都能把控。目前最缺乏的就是所謂的用戶體驗。這樣體驗具有層次感,而且用戶不會因為一大堆條件輸入框而感到厭煩。避免全部頁面,只用局部。 做前端也有一段時間了,對于實現(xiàn)各種需求來說已經(jīng)是游刃有余了,代碼的質(zhì)量和可擴展性都能把控。目前最缺乏的就是所謂的用戶體驗。 用戶體驗說起來是一個比較模糊的概念,但是又是實實在在...

      buildupchao 評論0 收藏0
    • 前端交互體驗優(yōu)化若干點

      摘要:做前端也有一段時間了,對于實現(xiàn)各種需求來說已經(jīng)是游刃有余了,代碼的質(zhì)量和可擴展性都能把控。目前最缺乏的就是所謂的用戶體驗。這樣體驗具有層次感,而且用戶不會因為一大堆條件輸入框而感到厭煩。避免全部頁面,只用局部。 做前端也有一段時間了,對于實現(xiàn)各種需求來說已經(jīng)是游刃有余了,代碼的質(zhì)量和可擴展性都能把控。目前最缺乏的就是所謂的用戶體驗。 用戶體驗說起來是一個比較模糊的概念,但是又是實實在在...

      darryrzhong 評論0 收藏0
    • webpack+vue項目實戰(zhàn)(四,前端與后端數(shù)據(jù)交互和前端展示數(shù)據(jù))

      摘要:簡單點說呢,就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來,用到的資源主要是和,其它參考插件使用。當時,加載中的提示就會出現(xiàn)。后端返回的數(shù)據(jù)如上圖,并不是所有的字段都是可以進行搜索的字段。 1.前言 今天要做的,就是在上一篇文章的基礎(chǔ)上,進行功能頁面的開發(fā)。簡單點說呢,就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來,用到的資源主要是element-ui和vue-resource,其它參考(vue-...

      Yumenokanata 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <