利用javaScript实现点击输入框弹出窗体选择信息

　　在这里奉上源代码，没有做样式处理，不过功能是可以的，希望大家可以和我交流交流！

复制代码代码如下:

　　<html>

　　<head>

　　<title>点击弹出DIV选择信息</title>

　　</head>

　　<body>

　　</body>

　　</html>

　　//数组信息

　　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: 点击文本框的对象

　　* idStr: json数组的id键名

　　* nameStr: json数组的name键名

　　* bool: true:表示追加 false:表示重新赋值

　　* boolSet: true:ID和Name的值都显示 false:只显示Name的值

　　* widthNum: 信息DIV的宽度

　　* heightNum: 信息DIV的高度

　　* arrName: 数组名称

　　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 < eval(arrName).length; 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);

　　};

　　}

　　};

　　//将按钮添加到搜索的DIV

　　alertQueryDiv.appendChild(alertQueryBUTTON);

　　//创建清空按钮

　　var alertClearBUTTON = document.createElement("input");

　　alertClearBUTTON.id = "alertClearBUTTON";

　　alertClearBUTTON.type = "button";

　　alertClearBUTTON.value = " 清空 ";

　　alertClearBUTTON.onclick = function(){

　　//给文本框赋空值

　　obj.value = "";

　　//移除弹出的窗体

　　document.body.removeChild(alertDiv);

　　document.body.removeChild(alertDivParent);

　　};

　　//将按钮添加到搜索的DIV

　　alertQueryDiv.appendChild(alertClearBUTTON);

　　//创建关闭按钮

　　var alertCancelBUTTON = document.createElement("input");

　　alertCancelBUTTON.id = "alertCancelBUTTON";

　　alertCancelBUTTON.type = "button";

　　alertCancelBUTTON.value = " 关闭 ";

　　alertCancelBUTTON.onclick = function(){

　　//移除弹出的窗体

　　document.body.removeChild(alertDiv);

　　document.body.removeChild(alertDivParent);

　　};

　　//将按钮添加到搜索的DIV

　　alertQueryDiv.appendChild(alertCancelBUTTON);

　　//创建显示信息的Table

　　var alertInfoTab = document.createElement("table");

　　alertInfoTab.id = "alertInfoTab";

　　with(alertInfoTab.style){

　　margin = 20;

　　}

　　//计算该宽度可放多少单元格

　　var tdWidthNum = 130;

　　var tdNum = parseInt(widthNum / tdWidthNum);

　　var num = 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;

　　//移除弹出的窗体

　　document.body.removeChild(alertDiv);

　　document.body.removeChild(alertDivParent);

　　};

　　}

　　//将table添加到显示信息的DIV

　　alertDiv.appendChild(alertInfoTab);

　　}

　　</script>

教程首页更多教程