Here is the source code, no style processing has been done, but the function is ok, I hope everyone can communicate with me!
Copy the code code as follows:
<html>
<head>
<title>Click to pop up DIV selection information</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="text" onfocus="alertDivINFO(this, 'id', 'name', true, true, 600, 300, 'arrs')" />
<div style="position: absolute;"></div>
</body>
</html>
<script type="text/javascript">
//array information
var arrs = new Array();
arrs.push({id: "1", name: "Zhang San 3"});
arrs.push({id:"2", name:"李思3"});
arrs.push({id:"3", name:"Shen Wuwu 3"});
arrs.push({id:"4", name:"Zhou Wansong3"});
arrs.push({id: "5", name: "Qin Xiao is 3"});
arrs.push({id:"6", name:"王五"});
arrs.push({id:"7", name:"Book 3"});
/**
* obj: Click the object of the text box
* idStr: id key name of json array
* nameStr: the name key of the json array
* bool: true: means appending false: means reassigning
* boolSet: true: both the ID and Name values are displayed false: only the Name value is displayed
* widthNum: width of information DIV
* heightNum: the height of the information DIV
* arrName: array name
*/
function alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.blur();
if(!widthNum){
widthNum = 600;
}
if(!heightNum){
heightNum = 350;
}
//Create a large DIV
var alertDivParent = document.createElement("div");
alertDivParent.id = "alertDivParent";
with(alertDivParent.style){
top = 0;
left = 0;
position = "absolute";
background = "#EEEEEE";
filter = "alpha(opacity=70)";
opacity = 0.7;
width = Math.max(document.body.clientWidth, document.body.scrollWidth);
height = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
document.body.appendChild(alertDivParent);
//Create a small DIV
var alertDiv = document.createElement("div");
alertDiv.id = "alertDiv";
with(alertDiv.style){
width = widthNum;
height = heightNum;
position = "absolute";
background = "#DDDDDD";
left = (Math.max(document.body.clientWidth, document.body.scrollWidth) - widthNum) / 2;
top = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;
}
//Add to form
document.body.appendChild(alertDiv);
//Create search DIV
var alertQueryDiv = document.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//Add the searched DIV to the information DIV
alertDiv.appendChild(alertQueryDiv);
alertQueryDiv.innerHTML = "Search name:";
//Create text box
var alertQueryINPUT = document.createElement("input");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "text";
//Add a text box to the searched DIV
alertQueryDiv.appendChild(alertQueryINPUT);
//Create search button
var alertQueryBUTTON = document.createElement("input");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "button";
alertQueryBUTTON.value = "Search";
//Add event to button
alertQueryBUTTON.onclick = function(){
//Calculate how many cells can be placed in this width
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
varnum = 0;
var j = 0;
//Get the Table displaying information
var alertInfoTab = document.getElementById("alertInfoTab");
//Clear THead information
alertInfoTab.deleteTHead();
//loop array
for(var i = 0; i < eval(arrName).length; i ++){
//If equal to the array, add it to TABLE
if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
var header;
if(j % tdNum == 0){
header = alertInfoTab.createTHead();
header = header.insertRow(num);
num++;
}
j++;
var headerName = header.insertCell(-1);
with(headerName.style){
width = tdWidthNum;
color = "blue";
cursor = "pointer";
}
if(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
else if(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
headerName.onclick = function(){
if(bool)
obj.value = obj.value + this.innerHTML + ";";
else if(!bool)
obj.value = this.innerHTML;
//Remove the pop-up form
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
}
};
//Add button to searched DIV
alertQueryDiv.appendChild(alertQueryBUTTON);
//Create a clear button
var alertClearBUTTON = document.createElement("input");
alertClearBUTTON.id = "alertClearBUTTON";
alertClearBUTTON.type = "button";
alertClearBUTTON.value = "Clear";
alertClearBUTTON.onclick = function(){
//Assign a null value to the text box
obj.value = "";
//Remove the pop-up form
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//Add button to searched DIV
alertQueryDiv.appendChild(alertClearBUTTON);
//Create a close button
var alertCancelBUTTON = document.createElement("input");
alertCancelBUTTON.id = "alertCancelBUTTON";
alertCancelBUTTON.type = "button";
alertCancelBUTTON.value = "Close";
alertCancelBUTTON.onclick = function(){
//Remove the pop-up form
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//Add button to searched DIV
alertQueryDiv.appendChild(alertCancelBUTTON);
//Create a Table to display information
var alertInfoTab = document.createElement("table");
alertInfoTab.id = "alertInfoTab";
with(alertInfoTab.style){
margin = 20;
}
//Calculate how many cells can be placed in this width
var tdWidthNum = 130;
var tdNum = parseInt(widthNum / tdWidthNum);
varnum = 0;
for(var i = 0; i < eval(arrName).length; i ++){
var header;
if(i % tdNum == 0){
header = alertInfoTab.createTHead();
header = header.insertRow(num);
num++;
}
var headerName = header.insertCell(-1);
with(headerName.style){
width = tdWidthNum;
color = "blue";
cursor = "pointer";
}
//var headerType = header.insertCell(-1);
if(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
else if(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
//headerType.appendChild(document.createTextNode("Type"));
headerName.onclick = function(){
if(bool)
obj.value = obj.value + this.innerHTML + ";";
else if(!bool)
obj.value = this.innerHTML;
//Remove the pop-up form
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
//Add table to the DIV that displays information
alertDiv.appendChild(alertInfoTab);
}
</script>