這篇文章主要是對利用javaScript實現點擊輸入框彈出窗體選擇信息進的實例行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
在這裡奉上源代碼，沒有做樣式處理，不過功能是可以的，希望大家可以和我交流交流！ 代碼如下: <html> <head> <title>點擊彈出DIV選擇信息</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"> //數組信息 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>