Buenas tengo un input que debe sugerir cierta información según se escibra en ellos. La cuestión es que tengo el código para uno de los inputs pero, como haría si quiero otro input que sugiera otra información distinta?
El código es el siguiente:
<script type="text/javascript">
var suggestions = new Array();
<%Iterator itrmail = mails.iterator();
while (itrmail.hasNext()){
Object mailObj = itrmail.next();
String mail='"'+mailObj.toString()+'"';%>
suggestions.push(<%=mail%>);
<%}%>
var outp;
var oldins;
var posi = -1;
var words = new Array();
var input;
var key;
function setVisible(visi){
var x = document.getElementById("output");
var t = document.getElementsByName("user_mail")[0];
x.style.position = 'absolute';
x.style.top = (findPosY(t)+3)+"px";
x.style.left = (findPosX(t)+2)+"px";
x.style.visibility = visi;
}
function init(){
outp = document.getElementById("output");
setVisible("hidden");
document.onkeydown = keygetter; //needed for Opera...
document.onkeyup = keyHandler;
}
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent){
curtop += obj.offsetHeight;
while (obj.offsetParent){
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (obj.y){
curtop += obj.y;
curtop += obj.height;
}
return curtop;
}
function lookAt(){
var ins = document.getElementsByName("user_mail")[0].value;
if (oldins == ins) return;
else if (posi > -1);
else if (ins.length > 0){
words = getWord(ins);
if (words.length > 0){
clearOutput();
for (var i=0;i < words.length; ++i) addWord (words[i]);
setVisible("");
input = document.getElementsByName("user_mail")[0].value;
}
else{
setVisible("none");
posi = -1;
}
}
else{
setVisible("none");
posi = -1;
}
oldins = ins;
}
function addWord(word){
var sp = document.createElement("div");
sp.appendChild(document.createTextNode(word));
sp.onmouseover = mouseHandler;
sp.onmouseout = mouseHandlerOut;
sp.onclick = mouseClick;
outp.appendChild(sp);
}
function clearOutput(){
while (outp.hasChildNodes()){
noten=outp.firstChild;
outp.removeChild(noten);
}
posi = -1;
}
function getWord(beginning){
var words = new Array();
for (var i=0;i < suggestions.length; ++i){
var j = -1;
var correct = 1;
while (correct == 1 && ++j < beginning.length){
if (suggestions[i].charAt(j) != beginning.charAt(j)) correct = 0;
}
if (correct == 1) words[words.length] = suggestions[i];
}
return words;
}
function setColor (_posi, _color, _forg){
outp.childNodes[_posi].style.background = _color;
outp.childNodes[_posi].style.color = _forg;
}
function keygetter(event){
if (!event && window.event) event = window.event;
if (event) key = event.keyCode;
else key = event.which;
}
function keyHandler(event){
lookAt();
if (document.getElementById("shadow").style.visibilit y == "visible"){
var textfield = document.getElementsByName("user_mail")[0];
if (key == 40){ //Key down
if (words.length > 0 && posi < words.length-1){
if (posi >=0) setColor(posi, "#fff", "black");
else input = textfield.value;
setColor(++posi, "blue", "white");
textfield.value = outp.childNodes[posi].firstChild.nodeValue;
}
}
else if (key == 38){ //Key up
if (words.length > 0 && posi >= 0){
if (posi >=1){
setColor(posi, "#fff", "black");
setColor(--posi, "blue", "white");
textfield.value = outp.childNodes[posi].firstChild.nodeValue;
}
else{
setColor(posi, "#fff", "black");
textfield.value = input;
textfield.focus();
posi--;
}
}
}
else if (key == 27){ // Esc
textfield.value = input;
setVisible("hidden");
posi = -1;
oldins = input;
}
else if (key == 8){ // Backspace
posi = -1;
oldins=-1;
}
}
}
var mouseHandler=function(){
for (var i=0; i < words.length; ++i)
setColor (i, "white", "black");
this.style.background = "blue";
this.style.color= "white";
}
var mouseHandlerOut=function(){
this.style.background = "white";
this.style.color= "black";
}
var mouseClick=function(){
document.getElementsByName("user_mail")[0].value = this.firstChild.nodeValue;
setVisible("hidden");
posi = -1;
oldins = this.firstChild.nodeValue;
}
</script>
<tr name="rspAbiertas" id="rspAbiertas" style="display:none">
<td width="20%" style="padding-left:20px;">
<%= LanguageUtil.get(pageContext, "email-address") %>:
</td>
<td width="20%" style="padding-left:10px;">
<input class="form-text" id="user_mail" name="user_mail" size="65" type="text" maxlength="75" autocomplete="off" >
</td>
<td style="padding-left:5px;">
<input class="portlet-form-button" type="button" name="acc" value="<%= LanguageUtil.get(pageContext, "save") %>"
onClick="<portlet:namespace />saveUsuario();" />
</td>
</tr>
<tr name="rspAbiertas" id="rspAbiertas" style="display:none">
<td width="5%" style="padding-left:80px;">
</td>
<td style="padding-left:10px;">
<div class="shadow" id="shadow" ></div>
<div class="output" id="output" ></div>
</td>
</tr>
¿Podría alguien ayudarme si quiero que tb apareza este otro campo?
<tr name="rspAbiertas" id="rspAbiertas" style="display:none">
<td width="5%" style="padding-left:80px;">
<%= LanguageUtil.get(pageContext, "first-name") %>:
</td>
<td width="20%" style="padding-left:10px;">
<input class="form-text" id="user_name" name="user_name" size="65" type="text" maxlength="75" autocomplete="off">
</td>
</tr>
<tr name="rspAbiertas" id="rspAbiertas" style="display:none">
<td width="5%" style="padding-left:80px;">
</td>
<td style="padding-left:10px;">
<div class="shadow" id="shadowName"></div>
<div class="output" id="outputName"></div>
</td>
</tr>
