<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Div Example</title>
<style>
.myePopup {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
border-radius: 3px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
z-index: 9999999;
max-height: 500px;
overflow-y: auto;
}
.show {
display: block;
}
.myePopup ul {
padding: 0;
margin: 0;
}
.myePopup li {
list-style: none;
line-height: 26px;
cursor: pointer;
margin: 3px;
padding-left: 10px;
}
.myePopup li:hover {
border: 1px solid rgb(83, 148, 200);
background-color: rgb(225, 239, 250);
}
</style>
</head>
<body>
<input type="text" id="myInput" style="height: 25px;">
<br/>
<input type="password" id="myInput2">
<script>
let myloginInfopwd = new function (userInfo, str) {
this.userInfo = [];
this.usernameid=""; this.init = function (userInfo,usernameid) {
if (userInfo && userInfo.length > 0) { this.userInfo = userInfo; }
if(usernameid&&usernameid.length>0)this.usernameid=usernameid;
this.binddata();
this.bindinput(usernameid);
};
this.bindinput=function(inputid){
let self=this;
let inputs = [document.getElementById(inputid),document.querySelector("input[type='password']")];
inputs.forEach(element => {
element.oninput = function () {
self.binddata(this.value);
}
element.addEventListener('focus', function () {
self.showPopup();
var input = this;
var rect = input.getBoundingClientRect(); // 获取输入框的几何信息
var bodyRect = document.body.getBoundingClientRect(); // 获取body的几何信息
// 计算相对于body的坐标
var x = rect.left - bodyRect.left;
var y = rect.top - bodyRect.top;
// 高度和宽度
var height = rect.height;
var width = rect.width;
document.getElementById("myePopup").style.left = (x + 10) + 'px';
document.getElementById("myePopup").style.top = (y + height + 10) + 'px';
});
element.addEventListener('blur', function () { self.hidePopup(); });
});
}
this.binddata = function (str) {
let self=this;
let div = document.getElementById("myePopup");
let isnew = false
if (!div) {
isnew = true
div = document.createElement("div");
div.id = "myePopup";
div.classList.add("myePopup");
}
console.log("binddata->", this.userInfo, str)
this.mydiv = div;
let ul;
if (this.userInfo && this.userInfo.length > 0) {
if (!str) str = "";
let nowlist = this.userInfo.filter(c => c.name.indexOf(str) > -1);
div.innerHTML = "";
ul = document.createElement("ul");
ul.id="myePopupul"
nowlist.forEach((element,index) => {
let li = document.createElement("li");
li.textContent = element.name;
li.id="li"+index
li.onmousedown = function () {
document.getElementById(self.usernameid).value = element.name;
document.querySelector("input[type='password']").value = element.pwd;
}
ul.appendChild(li);
});
div.appendChild(ul);
}
if (isnew) {
document.body.appendChild(div);
}
}
this.showPopup = function () {
document.getElementById("myePopup").classList.add("show");
}
this.hidePopup = function () {
document.getElementById("myePopup").classList.remove("show");
}
}
window.onload = function () {
myloginInfopwd.init([{
"name": "1760000001",
"pwd": "1",
"mark": "",
"url": "2",
"time": 1715826601753,
"isnopwd": false,
"confirstate": true
},
{
"name": "1571798012",
"pwd": "2",
"mark": "",
"url": "h",
"time": 1715241799984,
"isnopwd": false,
"confirstate": true
}],"myInput")
}
</script>
</body>
</html>
