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:

 
 
    
    
    
 

 
 
 

 

 //数组信息
 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);
}