利用javaScript實現(xiàn)點擊輸入框彈出窗體選擇信息

2019-11-20 21:29:23

字體：大中小

供稿：網(wǎng)友

在這里奉上源代碼，沒有做樣式處理，不過功能是可以的，希望大家可以和我交流交流！

<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>

//數(shù)組信息
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數(shù)組的id鍵名
* nameStr: json數(shù)組的name鍵名
* bool: true:表示追加 false:表示重新賦值
* boolSet: true:ID和Name的值都顯示 false:只顯示Name的值
* widthNum: 信息DIV的寬度
* heightNum: 信息DIV的高度
* arrName: 數(shù)組名稱
*/
function alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.blur();
if(!widthNum){
widthNum = 600;
}
if(!heightNum){
heightNum = 350;
}
//創(chuàng)建大的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);
//創(chuàng)建小的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);

//創(chuàng)建搜索的DIV
var alertQueryDiv = document.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//將搜索的DIV添加到信息DIV
    alertDiv.appendChild(alertQueryDiv);

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

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

    //創(chuàng)建搜索按鈕
    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();
     //循環(huán)數(shù)組
for(var i = 0; i < eval(arrName).length; i ++){
   //如果與數(shù)組中的相等就添加到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);

    //創(chuàng)建清空按鈕
    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);

    //創(chuàng)建關(guān)閉按鈕
    var alertCancelBUTTON = document.createElement("input");
alertCancelBUTTON.id = "alertCancelBUTTON";
    alertCancelBUTTON.type = "button";
    alertCancelBUTTON.value = " 關(guān) 閉 ";
    alertCancelBUTTON.onclick = function(){
//移除彈出的窗體
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
    };
    //將按鈕添加到搜索的DIV
    alertQueryDiv.appendChild(alertCancelBUTTON);

//創(chuàng)建顯示信息的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>