Actualizar un select

juanrams · #1 (**permalink**) 14/03/2007, 17:59

Hola:

Espero poder explicar lo que quiero realizar.

Tengo una lista, osea un select, donde vienen todos los datos, y pues abajo viene un input. Lo que quiero es que el usuario en vez de tener que buscar en toda la lista (el select), que tan solo escriba en el input text, lo que quiere y que en la lista se seleccione la opcion que desea.

Muchas gracias
Saludos

zyon · #2 (**permalink**) 14/03/2007, 18:18

que tal, puedes hacer talves algo asi en la funcion JS:

<input type=text name="nombreText" onBlur="asignaValor(this.value);">

function asignaValor(valorTex){//el objeto que recibe es el valor del TEXT
document.all.nombreSelec.value=valorText;
document.all.nombreText.value="";
}

bueno, seguramente te diran que el all esta descontinuado, pero io solo trabajo sobre IE, asi que es lo unico que uso jeje, pero de seguro alguien sabra orientarte bien, espero te ayude y si no pues lo intente, no soy muy bueno programando :(, Suerte, saludo!!!

JavierB · #3 (**permalink**) 15/03/2007, 01:58

Hola juanrams

Prueba este código:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function buscar(obj) {
  sele = obj.form.sel;
  for (i=0; opt = sele.options[i]; i++)
    if (opt.value.substr(0,obj.value.length) == obj.value) {
      sele.selectedIndex = i;
      break;
    }
}
</script>
</head>
<body>
<form>
<select name="sel">
<option value="uno">Uno</option>
<option value="unas">Unas</option>
<option value="otras">Otras</option>
</select>
<input type="text" onkeyup="buscar(this)" />
</form>
</body>
</html>

Saludos,

Shade · #4 (**permalink**) 15/03/2007, 02:20

Mmmm yo te recomendaria usar el Ajax autocomplete... pero claro ya no es algo tan facil. Pero creo que es la mejor opcion, segun vayan escribiendo los usuarios se ira desplegando una lista de opciones que concuerdan con lo que escriben.

Por ejemplo si escribes Bar aparecera un menu desplegable con varias opciones como:
Baracaldo
Barcelona
Barajas

MarceloWeb · #5 (**permalink**) 15/03/2007, 07:00

Hola....la recomendación que da Shade es acertada.
En esta dirección podrás encontrar el código del autocomplete de Ajax.

http://www.formatoweb.com.ar/ajax

Espero que te sirva.

Saludos.

zyon · #6 (**permalink**) 15/03/2007, 07:30

si, es buena opcion, io la utilize , pero encontre un autocompletar con puro javaScript :P ya que no me he metido a ver AJAX pues mejor no me quise complicar la vida con un codigo que lleva AJAX, aunque tengo que hecharle un ojo pronto, bueno suerte!

MarceloWeb · #7 (**permalink**) 15/03/2007, 13:40

Hola Zyon....me puedes facilitar el código del autocompletar que es puro javascript.

Gracias

zyon · #8 (**permalink**) 15/03/2007, 16:49

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>

derkenuke · #9 (**permalink**) 15/03/2007, 17:06

Me ha gustado mucho la idea, estoy preparando uno con selects multiples, publicaré el código.

Por cierto javierB:
sele.selectedIndex = i; habría que cambiarlo por sele.options.selectedIndex = i; y además sele = obj.form.sel; no apunta a nada porque en cualquier momento obj es el argumento pasado a la función, que en la llamada es this en el botón, luego sería como boton.form.sel, que no apunta a ningún sitio. Debería apuntar al select.

¿Para qué quieres AJAX autocomplete si todas las opciones las tienes metidas en el select?
No entiendo mucho la utilidad de este script, creo que es más facil hacer un click que escribir, pero bueno, si hay muchos elementos puede ser útil para ir filtrando opciones innecesarias.

Lo dicho, publicaré un código.

zyon · #10 (**permalink**) 15/03/2007, 17:12

hola DERKENUKE, que dices que preparas? un select de opcion multiple?

JavierB · #11 (**permalink**) 16/03/2007, 02:03

Hola derkenuke

sele = obj.form.sel apunta, si no estoy muy confundido, al select:

obj.form es el formulario donde está el botón que ha llamado a la función y, por tanto, sele = obj.form.sel es el select que tiene name="sel"

Así que sele.selectedIndex = i cambia la selección del select

Si me he despistado en algo, dímelo, y así vamos aprendiendo todos.

Saludos,

derkenuke · #12 (**permalink**) 16/03/2007, 05:21

Sí, perdona Javier, pensaba que selectedIndex era propiedad de options, así funciona tal cual. Yo pondría indiferencia entre mayúsculas y minúsculas (detalles) pero el código así sí que funciona y está bien.

Cita:

Iniciado por zyon

hola DERKENUKE, que dices que preparas? un select de opcion multiple?

Sí, estoy intentando hacer eso mismo pero para filtrar opciones en un select múltiple.

zyon · #13 (**permalink**) 16/03/2007, 07:47

a ok, bueno, ojala que cuando lo tengas compartas elc odigo para hecharle un ojo! Suerte! Saludos!

derkenuke · #14 (**permalink**) 16/03/2007, 13:09

Bueno, un ejemplo sencillo derivado del de Javier, pero con expresiones regulares:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="">
<html>
<head>
<script type="text/javascript">
function buscar(obj) {
    sele = obj.form.sel;
    for (i=0; opt = sele.options[i]; i++)
        if ( new RegExp("^"+obj.value,"i").test(opt.text) )
            opt.selected=true;
        else
            opt.selected=false;
}
</script>
</head>
<body>
<form>
<select name="sel" size="5" multiple="multiple">
<option value="1">Uno</option>
<option value="2">Unas</option>
<option value="3">Otras</option>
<option value="4">Otros</option>
<option value="5">Algunos</option>
<option value="6">AlgUnas</option>
<option value="7">Algo</option>
<option value="8">Cuando</option>
<option value="9">cuadrado</option>
<option value="10">Como</option>
</select>
<input type="text" onkeyup="buscar(this)" />
</form>
</body>
</html>

Útil para filtrar elementos de un select si son muchos (como por ejemplo provincias y tal.

Espero que os parezca interesante, porque sencillito sí que es.

juanrams · #15 (**permalink**) 16/03/2007, 13:42

Muchas gracias a todos

Estuve probando sus soluciones y me funcionaron muy bien.

Es que estoy tratando de hacer un sistema basado en ajax, pero solo tenia este pequeño detalle.

pero muchas gracias

Saludos

juanrams · #16 (**permalink**) 16/03/2007, 13:42

Muchas gracias javier

me funciono de maravilla

Cita:

Iniciado por JavierB

Hola juanrams

Prueba este código:

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
function buscar(obj) { 
  sele = obj.form.sel; 
  for (i=0; opt = sele.options[i]; i++) 
    if (opt.value.substr(0,obj.value.length) == obj.value) { 
      sele.selectedIndex = i; 
      break; 
    } 
} 
</script> 
</head> 
<body> 
<form> 
<select name="sel"> 
<option value="uno">Uno</option> 
<option value="unas">Unas</option> 
<option value="otras">Otras</option> 
</select> 
<input type="text" onkeyup="buscar(this)" /> 
</form> 
</body> 
</html>

Saludos,

derkenuke · #17 (**permalink**) 17/03/2007, 08:53

Ups, y no me había fijado que lo mismito pero en vez de para seleccionar las opciones que nos interesen, para filtrarlas (es decir, dejar sólo las que coincidan) está en las FAQ:
http://www.forosdelweb.com/showthrea...150#post268150