代码迁移
This commit is contained in:
131
src/Obj/Element/datalist.js
Normal file
131
src/Obj/Element/datalist.js
Normal file
@ -0,0 +1,131 @@
|
||||
var legp = function (parentElement, ele) {
|
||||
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 () {
|
||||
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];
|
||||
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" 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[0].oninput = function () {
|
||||
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[0].innerHTML = "";
|
||||
tagData.forEach(function (item) {
|
||||
if (sear_1.test(item.name)) {
|
||||
judge_1 = true;
|
||||
legp(parentElement, ".cy_datalist dl").that[0].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[0].innerHTML = "<dd style=\"padding: 10px 20px; color: #fff;\">\u6682\u65E0\u6570\u636E</dd>";
|
||||
}
|
||||
myClick();
|
||||
}
|
||||
};
|
||||
//显示没被选择的
|
||||
legp(parentElement, ".cy_datalist input").that[0].onclick = function (e) {
|
||||
if(legp(parentElement, ".cy_datalist dl").that[0].style.display === 'none') {
|
||||
if (tagData.length == 0) {
|
||||
this.innerHTML = "暂无数据";
|
||||
}
|
||||
else {
|
||||
legp(parentElement, ".cy_datalist dl").show();
|
||||
}
|
||||
legp(parentElement, ".cy_datalist dl").that[0].innerHTML = "";
|
||||
tagData.forEach(function (item) {
|
||||
legp(parentElement, ".cy_datalist dl").that[0].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 }
|
||||
Reference in New Issue
Block a user