sdk4.0/src/Obj/Element/datalist.js

var legp = function (parentElement, ele, index = 0) {
  let targetValue = null
  return ({
    that: Array.prototype.slice.call(parentElement.querySelectorAll(ele), 0),
    stopPropagation: function (e) {
      e = e || window.event;
      if (e.stopPropagation) { //W3C阻止冒泡方法
        e.stopPropagation();
      }
      else {
        e.cancelBubble = true; //IE阻止冒泡方法
      }
    },
    hide: function () {
      legp(parentElement, ele).that.forEach(function (item) {
        item.style.cssText += "display:none;";
      });
    },
    show: function (num) {
      if (num !== undefined) {
        legp(parentElement, ele).that[num].style.cssText += "display:block;";
      } else {
        legp(parentElement, ele).that.forEach(function (item) {
          item.style.cssText += "display:block;";
        });
      }
    },
    legp_searchList: function (name) {
      let arr = [];
      legp(parentElement, "input[name=" + name + "]").that.forEach(item => {
        arr.push(item.value)
      });
      return arr;
    },
    legp_search: function (tagData, search = false) {
      // var domId = legp(parentElement, ele).that[0];
      var domId = legp(parentElement, ele).that[index];
      if (!domId) {
        return
      }
      var html = `<div class="cy_datalist"><i class="yj-custom-icon-arrow-down"></i>\n  ${search ? '<input type="text" placeholder="\u8F93\u5165\u6216\u9009\u62E9" autocomplete="off">' : `<input type="text" class="datalist ${index}" readonly="readonly" placeholder="\u8bf7\u9009\u62e9" autocomplete="off">`}\n                    <dl style="display: none;position: absolute;background: rgba(0, 0, 0, 0.5);color: rgba(var(--color-sdk-base-rgb), 1);border: 1px solid rgba(var(--color-sdk-base-rgb), 0.2);border-radius: 3px;margin: 2px 0px;max-height: 300px;overflow-x: hidden;white-space: nowrap; font-size: 12px;z-index: 8;">\n                    </dl>\n                </div>`;
      domId.innerHTML = html;
      // domId.appendChild(dom);
      //获取当前广告
      function myClick() {
        legp(parentElement, ".cy_datalist dl dd").that.forEach(function (item) {
          item.onclick = function (e) {
            if (!this || !this.attributes) {
              return
            }
            let value = this.attributes.value.value;
            targetValue = value
            e.currentTarget.parentNode.previousElementSibling.value = value
            // 为了触发绑定的事件处理器，我们可以手动创建一个事件并触发它
            const event = new Event('input', { bubbles: true });
            e.currentTarget.parentNode.previousElementSibling.dispatchEvent(event);
            // if (id != '') {
            //     legp(".AD").that[0].innerHTML += "<a href=\"javascript:;\" class=\"label\"><span>" + this.innerHTML + "</span><input type=\"hidden\" name=\"" + name + "\" id=\"" + id + "\" value=\"" + id + "\"/><span class=\"close\">x</span></a>";
            //     legp(".AD").that[0].parentNode.style.cssText += "display:block;";
            //     for (var i = 0; i < tagData.length; i++) {
            //         if (tagData[i].id == id) {
            //             tagData.splice(i, 1);
            //             i = tagData.length;
            //         }
            //     }
            //     removeAdvertising();
            // }
            // legp(".cy_datalist dl").hide();
            // legp(".cy_datalist input").that[0].value = '';
            // e.stopPropagation();
          };
        });
      }

      //筛选
      legp(parentElement, ".cy_datalist input").that[index].oninput = function (e) {
        var val = this.value; //获取input值
        legp(parentElement, ".cy_datalist dl").hide();
        if (tagData.length > 0) {
          legp(parentElement, ".cy_datalist dl").show();
          var sear_1 = new RegExp(val);
          var judge_1 = false;
          legp(parentElement, ".cy_datalist dl").that[index].innerHTML = "";
          tagData.forEach(function (item) {
            if (sear_1.test(item.name)) {
              judge_1 = true;
              legp(parentElement, ".cy_datalist dl").that[index].innerHTML += "<dd class=\"" + ((targetValue === item.value) ? 'active' : '') + "\" style=\"margin: 0; padding: 5px 5px; color: #fff;cursor: pointer;\" value=\"" + item.value + "\">" + item.name + "</dd>";
            }
          });
          if (!judge_1) {
            legp(parentElement, ".cy_datalist dl").that[index].innerHTML = "<dd style=\"padding: 10px 20px; color: #fff;\">\u6682\u65E0\u6570\u636E</dd>";
          }
          myClick();
        }
      };
      //显示没被选择的
      legp(parentElement, ".cy_datalist input").that[index].onclick = function (e) {

        legp(parentElement, ".cy_datalist dl").hide();
        let num = e.srcElement.classList[1] * 1
        num = num || 0
        if (legp(parentElement, ".cy_datalist dl").that[num].style.display === 'none') {
          if (tagData.length == 0) {
            this.innerHTML = "暂无数据";
          }
          else {
            legp(parentElement, ".cy_datalist dl").show(num);
          }
          legp(parentElement, ".cy_datalist dl").that[num].innerHTML = "";
          tagData.forEach(function (item) {
            legp(parentElement, ".cy_datalist dl").that[num].innerHTML += "<dd class=\"" + ((targetValue === item.value) ? 'active' : '') + "\" style=\"margin: 0; padding: 5px 5px; color: #fff;cursor: pointer;\" value=\"" + item.value + "\">" + item.name + "</dd>";
          });
          myClick();
        }
        e.stopPropagation();
      };
      // //封装
      // function clickoutSide(nameClass, callback) {
      // 	// 全局注册点击事件
      // 	document.onclick = function (e) {
      // 		//若点击元素为目标元素则返回
      // 		if (e.target.className === nameClass) return
      // 		//否则执行回调函数
      // 		callback()
      // 	}
      // }
      //隐藏
      document.addEventListener('click', () => {
        legp(parentElement, ".cy_datalist dl").hide();
        // legp(parentElement, ".cy_datalist input").that[0].value = "";
      })
    },
    legp_searchActive: function (value) {
      targetValue = value
    }
  });
};

export { legp }