Use JavaScript to realize pop-up form selection information by clicking on the input box_javascript skills

I present the source code here. There is no style processing, but the function is OK. I hope everyone can communicate with me!

Copy code The code is as follows: 点击弹出DIV选择信息

//数组信息 var arrs = new Array(); arrs.push({id:"1", name:"张三3"}); arrs.push({id:"2", name:"李四3"}); arrs.push({id:"3", name:"申午武3"}); arrs.push({id:"4", name:"周琬淞3"}); arrs.push({id:"5", name:"覃晓为3"}); arrs.push({id:"6", name:"王五"}); arrs.push({id:"7", name:"宝典3"});

/** * obj: Click the object of the text box * idStr: The id key name of the json array * nameStr: The name key name of the json array * bool: true: means appending false: means reassigning * boolSet: true: both ID and Name values are displayed false: only the Name value is displayed * widthNum: width of the information DIV * heightNum: 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; } //创建大的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); //创建小的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; } //添加到窗体 document.body.appendChild(alertDiv);

//创建搜索的DIV var alertQueryDiv = document.createElement("div"); alertQueryDiv.id = "alertQueryDiv"; //将搜索的DIV添加到信息DIV alertDiv.appendChild(alertQueryDiv);

alertQueryDiv.innerHTML = "搜索 名称：";

//创建文本框 var alertQueryINPUT = document.createElement("input"); alertQueryINPUT.id = "alertQueryINPUT"; alertQueryINPUT.type = "text"; //将文本框添加到搜索的DIV alertQueryDiv.appendChild(alertQueryINPUT);

//创建搜索按钮 var alertQueryBUTTON = document.createElement("input"); alertQueryBUTTON.id = "alertQueryBUTTON"; alertQueryBUTTON.type = "button"; alertQueryBUTTON.value = " 搜 索 "; //给按钮添加事件 alertQueryBUTTON.onclick = function(){ //计算该宽度可放多少单元格 var tdWidthNum = 130; var tdNum = parseInt(widthNum / tdWidthNum); var num = 0; var j = 0; //获取显示信息的Table var alertInfoTab = document.getElementById("alertInfoTab"); //清空THead的信息 alertInfoTab.deleteTHead(); //循环数组 for(var i = 0; i //如果与数组中的相等就添加到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; //移除弹出的窗体 document.body.removeChild(alertDiv); document.body.removeChild(alertDivParent); }; } } }; //Add the button to the 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 the button to the 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); }; //Remove Button added to the 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); var num = 0; for(var i = 0; 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); }

Use JavaScript to realize pop-up form selection information by clicking on the input box_javascript skills

Related articles