资讯专栏INFORMATION COLUMN

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

Ververica / 2277人阅读

摘要:今天遇到一个问题,就是的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。实现思路其实就是,模仿的下拉框样式,然后监听的输入事件,一旦输入,就调接口,让后台返给我查到的数据。

今天遇到一个问题,就是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的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。 实现思路其实就是,模仿layui.js的下拉框样式,然后监听input的输入事件,一...

      scola666 评论0 收藏0
    • 写了一个可以通过后台接口实现模糊查询下拉因为layui.js满足需求)。

      摘要:今天遇到一个问题,就是的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。实现思路其实就是,模仿的下拉框样式,然后监听的输入事件,一旦输入,就调接口,让后台返给我查到的数据。 今天遇到一个问题,就是layui.js的下拉框模糊查询功能并不能满足我的需求,因此我动手自己写了一个下拉框。 实现思路其实就是,模仿layui.js的下拉框样式,然后监听input的输入事件,一...

      seal_de 评论0 收藏0
    • 前端交互体验优化若干点

      摘要:做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。这样体验具有层次感,而且用户不会因为一大堆条件输入框而感到厌烦。避免全部页面,只用局部。 做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。 用户体验说起来是一个比较模糊的概念,但是又是实实在在...

      buildupchao 评论0 收藏0
    • 前端交互体验优化若干点

      摘要:做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。这样体验具有层次感,而且用户不会因为一大堆条件输入框而感到厌烦。避免全部页面,只用局部。 做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。 用户体验说起来是一个比较模糊的概念,但是又是实实在在...

      darryrzhong 评论0 收藏0
    • webpack+vue项目实战(四,前端与后端数据交互和前端展示数据)

      摘要:简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是和,其它参考插件使用。当时,加载中的提示就会出现。后端返回的数据如上图,并不是所有的字段都是可以进行搜索的字段。 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发。简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-...

      Yumenokanata 评论0 收藏0

    发表评论

    0条评论

    Ververica

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <