Ver Mensaje Individual
  #8 (permalink)  
Antiguo 15/03/2007, 16:49
zyon
 
Fecha de Ingreso: septiembre-2005
Mensajes: 1.289
Antigüedad: 19 años, 5 meses
Puntos: 3
Re: Actualizar un select

Claro, te lo paso, esta mas sencillo que el de AJAX para mi jeje, suerte!!!

Código HTML:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css" media="all">
#suggest{
	position:absolute;
	background:#fff;
	width:130px;
	visibility:hidden;
        border:#000000 1px solid;
        z-index: 1000;
	}

#suggest div{
	background:#fff;
	color:#000;
	padding-left:4px;
	cursor:hand;
	text-align:left;
	}

#suggest div.over{
	color:#fff;
	background:#000;
	}
</style>

<script language="JavaScript">

// ++++++++++++++++ Esta parte es la de Autocompletar ++++++++++++++++++
  
  function autoCompleteDB()
{
	this.aNames=new Array();
}

autoCompleteDB.prototype.assignArray=function(aList)
{
	this.aNames=aList;
};

autoCompleteDB.prototype.getMatches=function(str,aList,maxSize)
{
	/* debug */ //alert(maxSize+"ok getmatches");
	var ctr=0;
	for(var i in this.aNames)
	{
		if(this.aNames[i].toLowerCase().indexOf(str.toLowerCase())==0) /*looking for case insensitive matches */
		{
			aList.push(this.aNames[i]);
			ctr++;
		}
		if(ctr==(maxSize-1)) /* counter to limit no of matches to maxSize */
			break;
	}
};

function autoComplete(aNames,oText,oDiv,maxSize)
{

	this.oText=oText;
	this.oDiv=oDiv;
	this.maxSize=maxSize;
	this.cur=-1;

	
	/*debug here */
	//alert(oText+","+this.oDiv);
	
	this.db=new autoCompleteDB();
	this.db.assignArray(aNames);
	
	oText.onkeyup=this.keyUp;
	oText.onkeydown=this.keyDown;
	oText.autoComplete=this;
	oText.onblur=this.hideSuggest;
}

autoComplete.prototype.hideSuggest=function()
{
	this.autoComplete.oDiv.style.visibility="hidden";
};

autoComplete.prototype.selectText=function(iStart,iEnd)
{
	if(this.oText.createTextRange) /* For IE */
	{
		var oRange=this.oText.createTextRange();
		oRange.moveStart("character",iStart);
		oRange.moveEnd("character",iEnd-this.oText.value.length);
		oRange.select();
	}
	else if(this.oText.setSelectionRange) /* For Mozilla */
	{
		this.oText.setSelectionRange(iStart,iEnd);
	}
	this.oText.focus();
};

autoComplete.prototype.textComplete=function(sFirstMatch)
{
	if(this.oText.createTextRange || this.oText.setSelectionRange)
	{
		var iStart=this.oText.value.length;
		this.oText.value=sFirstMatch;
		this.selectText(iStart,sFirstMatch.length);
	}
};

autoComplete.prototype.keyDown=function(oEvent)
{
	oEvent=window.event || oEvent;
	iKeyCode=oEvent.keyCode;

	switch(iKeyCode)
	{
		case 38: //up arrow
			this.autoComplete.moveUp();
			break;
		case 40: //down arrow
			this.autoComplete.moveDown();
			break;
		case 13: //return key
                    window.focus();
			break;
	}
};

autoComplete.prototype.moveDown=function()
{
	if(this.oDiv.childNodes.length>0 && this.cur<(this.oDiv.childNodes.length-1))
	{
		++this.cur;
		for(var i=0;i<this.oDiv.childNodes.length;i++)
		{
			if(i==this.cur)
			{
				this.oDiv.childNodes[i].className="over";
				this.oText.value=this.oDiv.childNodes[i].innerHTML;
			}
			else
			{
				this.oDiv.childNodes[i].className="";
			}
		}
	}
};

autoComplete.prototype.moveUp=function()
{
	if(this.oDiv.childNodes.length>0 && this.cur>0)
	{
		--this.cur;
		for(var i=0;i<this.oDiv.childNodes.length;i++)
		{
			if(i==this.cur)
			{
				this.oDiv.childNodes[i].className="over";
				this.oText.value=this.oDiv.childNodes[i].innerHTML;
			}
			else
			{
				this.oDiv.childNodes[i].className="";
			}
		}
	}
};

autoComplete.prototype.keyUp=function(oEvent)
{
	oEvent=oEvent || window.event;
	var iKeyCode=oEvent.keyCode;
	if(iKeyCode==8 || iKeyCode==46)
	{
		this.autoComplete.onTextChange(false); /* without autocomplete */
	}
	else if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123)) 
	{
        //ignore
    } 
	else 
	{
		this.autoComplete.onTextChange(true); /* with autocomplete */
	}
};

autoComplete.prototype.positionSuggest=function() /* to calculate the appropriate poistion of the dropdown */
{       
	this.oDiv.style.top=67+"px";
	this.oDiv.style.left=560+"px";
}

autoComplete.prototype.onTextChange=function(bTextComplete)
{
	var txt=this.oText.value;
	var oThis=this;
	this.cur=-1;
	
	if(txt.length>0)
	{
		while(this.oDiv.hasChildNodes())
			this.oDiv.removeChild(this.oDiv.firstChild);
		
		var aStr=new Array();
		this.db.getMatches(txt,aStr,this.maxSize);
		if(!aStr.length) {this.hideSuggest ;return}
		if(bTextComplete) this.textComplete(aStr[0]);
		this.positionSuggest();
		
		for(i in aStr)
		{
			var oNew=document.createElement('div');
			this.oDiv.appendChild(oNew);
			oNew.onmouseover=
			oNew.onmouseout=
			oNew.onmousedown=function(oEvent)
			{
				oEvent=window.event || oEvent;
				oSrcDiv=oEvent.target || oEvent.srcElement;

				//debug :window.status=oEvent.type;
				if(oEvent.type=="mousedown")
				{
					oThis.oText.value=this.innerHTML;
				}
				else if(oEvent.type=="mouseover")
				{       
					this.className="over";
				}
				else if(oEvent.type=="mouseout")
				{
					this.className="";
				}
				else
				{
					this.oText.focus();
				}
			};
			oNew.innerHTML=aStr[i];
		}
		this.oDiv.style.visibility="visible";
	}
	else
	{
		this.oDiv.innerHTML="";
		this.oDiv.style.visibility="hidden";
		
	}
	
};
  // ++++++++++++++++ Fin de autoCompletar +++++++++++++++++++++++++++++++
</script>

<body onLoad="createAutoComplete();">
<form name="prueba_auto" autocomplete=off>

<!--Estos elementos son para el autocompletar CATEGORIA-->
<div style="text-align:center;top:45px;left:560px;Position:absolute;">
<input type="text" id="txt" style="width:130px;" autocomplete=off name='categoria'><br>
</div>
<div id="suggest"></div>
<!-- fin -->

</form>

</body>
<script>
// ++++++ Esta funcion es la que despliega el autocompletar +++++++

function createAutoComplete()
{
var aNames =
	[
            "a","aqui","van","los valores","cool","cata","catalo"
	];

new autoComplete(aNames,document.getElementById('txt'),document.getElementById('suggest'),10);
}
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
</script>
</html> 
__________________
Wow! No se que decir...