Aqui está o código fonte, nenhum processamento de estilo é feito, mas a função está ok, espero que todos possam se comunicar comigo!
Copie o código do código da seguinte forma:
<html>
<cabeça>
<title>Clique para exibir informações de seleção DIV</title>
<meta http-equiv="palavras-chave" content="palavra-chave1,palavra-chave2,palavra-chave3">
<meta http-equiv="description" content="esta é minha página">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<corpo>
<input type="text" onfocus="alertDivINFO(this, 'id', 'nome', verdadeiro, verdadeiro, 600, 300, 'arrs')" />
<div style="posição: absoluto;"></div>
</body>
</html>
<script type="texto/javascript">
//informações da matriz
var arrs = new Array();
arrs.push({id: "1", nome: "Zhang San 3"});
arrs.push({id:"2", nome:"李思3"});
arrs.push({id:"3", nome:"Shen Wuwu 3"});
arrs.push({id:"4", nome:"Zhou Wansong3"});
arrs.push({id: "5", nome: "Qin Xiao tem 3"});
arrs.push({id:"6", nome:"王五"});
arrs.push({id:"7", nome:"Livro 3"});
/**
* obj: Clique no objeto da caixa de texto
* idStr: nome da chave id do array json
* nameStr: a chave do nome do array json
* bool: true: significa anexar false: significa reatribuir
* boolSet: true: os valores de ID e Nome são exibidos falso: apenas o valor de Nome é exibido
* widthNum: largura da informação DIV
* heightNum: a altura da informação DIV
* arrName: nome do array
*/
function alertDivINFO(obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName){
obj.blur();
if(!larguraNum){
larguraNum = 600;
}
if(!alturaNum){
alturaNum = 350;
}
//Cria um DIV grande
var alertDivParent = document.createElement("div");
alertDivParent.id = "alertDivParent";
com(alertDivParent.style){
topo = 0;
esquerda = 0;
posição = "absoluta";
background = "#EEEEEE";
filtro = "alfa(opacidade=70)";
opacidade = 0,7;
largura = Math.max(document.body.clientWidth, document.body.scrollWidth);
altura = Math.max(document.body.clientHeight, document.body.scrollHeight);
}
document.body.appendChild(alertDivParent);
//Cria um pequeno DIV
var alertDiv = document.createElement("div");
alertDiv.id = "alertDiv";
com(alertDiv.style){
largura = larguraNum;
altura = alturaNum;
posição = "absoluta";
background = "#DDDDDD";
esquerda = (Math.max(document.body.clientWidth, document.body.scrollWidth) - larguraNum) / 2;
topo = (Math.max(document.body.clientHeight, document.body.scrollHeight) - heightNum) / 2;
}
//Adiciona ao formulário
document.body.appendChild(alertDiv);
//Cria DIV de pesquisa
var alertQueryDiv = document.createElement("div");
alertQueryDiv.id = "alertQueryDiv";
//Adiciona o DIV pesquisado ao DIV de informações
alertDiv.appendChild(alertQueryDiv);
alertQueryDiv.innerHTML = "Nome da pesquisa:";
//Cria caixa de texto
var alertQueryINPUT = document.createElement("entrada");
alertQueryINPUT.id = "alertQueryINPUT";
alertQueryINPUT.type = "texto";
//Adiciona uma caixa de texto ao DIV pesquisado
alertQueryDiv.appendChild(alertQueryINPUT);
//Cria botão de pesquisa
var alertQueryBUTTON = document.createElement("entrada");
alertQueryBUTTON.id = "alertQueryBUTTON";
alertQueryBUTTON.type = "botão";
alertQueryBUTTON.value = "Pesquisar";
//Adiciona evento ao botão
alertQueryBUTTON.onclick = function(){
//Calcula quantas células podem ser colocadas nesta largura
var tdWidthNum = 130;
var tdNum = parseInt(larguraNum / tdWidthNum);
varnum = 0;
varj = 0;
//Obtém a tabela exibindo informações
var alertInfoTab = document.getElementById("alertInfoTab");
//Limpa as informações do THead
alertInfoTab.deleteTHead();
//matriz de loop
for(var i = 0; i < eval(arrName).length; i ++){
//Se for igual ao array, adiciona-o a TABLE
if(eval(arrName + "[i]." + nameStr).indexOf(alertQueryINPUT.value) >= 0){
cabeçalho var;
if(j % tdNum == 0){
cabeçalho = alertInfoTab.createTHead();
cabeçalho = cabeçalho.insertRow(num);
num++;
}
j++;
var headerName = header.insertCell(-1);
com(headerName.style){
largura = tdWidthNum;
cor = "azul";
cursor = "ponteiro";
}
if(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
senão if(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
headerName.onclick = function(){
se(bool)
obj.valor = obj.valor + this.innerHTML + ";";
senão if(!bool)
obj.valor = this.innerHTML;
//Remove o formulário pop-up
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
}
};
//Adiciona botão ao DIV pesquisado
alertQueryDiv.appendChild(alertQueryBUTTON);
//Cria um botão limpar
var alertClearBUTTON = document.createElement("entrada");
alertClearBUTTON.id = "alertClearBUTTON";
alertClearBUTTON.type = "botão";
alertClearBUTTON.value = "Limpar";
alertClearBUTTON.onclick=função(){
//Atribuir um valor nulo à caixa de texto
obj.valor = "";
//Remove o formulário pop-up
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//Adiciona botão ao DIV pesquisado
alertQueryDiv.appendChild(alertClearBUTTON);
//Cria um botão fechar
var alertCancelBUTTON = document.createElement("input");
alertCancelBUTTON.id = "alertCancelBUTTON";
alertCancelBUTTON.type = "botão";
alertCancelBUTTON.value = "Fechar";
alertCancelBUTTON.onclick = function(){
//Remove o formulário pop-up
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
//Adiciona botão ao DIV pesquisado
alertQueryDiv.appendChild(alertCancelBUTTON);
//Cria uma tabela para exibir informações
var alertInfoTab = document.createElement("tabela");
alertInfoTab.id = "alertInfoTab";
com(alertInfoTab.style){
margem = 20;
}
//Calcula quantas células podem ser colocadas nesta largura
var tdWidthNum = 130;
var tdNum = parseInt(larguraNum / tdWidthNum);
varnum = 0;
for(var i = 0; i < eval(arrName).length; i ++){
cabeçalho var;
if(i% tdNum == 0){
cabeçalho = alertInfoTab.createTHead();
cabeçalho = cabeçalho.insertRow(num);
num++;
}
var headerName = header.insertCell(-1);
com(headerName.style){
largura = tdWidthNum;
cor = "azul";
cursor = "ponteiro";
}
//var headerType = header.insertCell(-1);
if(boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + idStr) + ": " + eval(arrName + "[i]." + nameStr)));
senão if(!boolSet)
headerName.appendChild(document.createTextNode(eval(arrName + "[i]." + nameStr)));
//headerType.appendChild(document.createTextNode("Tipo"));
headerName.onclick = function(){
se(bool)
obj.valor = obj.valor + this.innerHTML + ";";
senão if(!bool)
obj.valor = this.innerHTML;
//Remove o formulário pop-up
document.body.removeChild(alertDiv);
document.body.removeChild(alertDivParent);
};
}
//Adiciona tabela ao DIV que exibe informações
alertDiv.appendChild(alertInfoTab);
}
</script>