campo de texto con opciones desplegables

edu007ar · #1 (**permalink**) 20/12/2008, 14:24

hola gente... necesitaba una funcion javascript para poder mostrar opciones cuando se empieza a escribir o se hace click en un campo de texto, pero no necesito que busque en bases de datos ni nada con ajax ya que las opciones serían siempre las mismas.

Más precisamente tengo un campo de texto donde se debe ingresar la unidad de medida (MTS, C/U, X1000), al tener el foco ese campo debería mostrar dichas opciones abajo pero también permitir colocar cualquier otra unidad.

Como ejemplo podría indicarles el campo de búsqueda de YouTube, donde uno va escribiendo y muestra opciones, claro que las opciones serían siempre las mismas y no debería buscar en bases de datos.

Espero se haya entendido.

Gracias de antemano.

Eduardo

Panino5001 · #2 (**permalink**) 20/12/2008, 15:47

Fijate si te sirve algo así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
<style> 
*{margin:0; padding:0} 
#lista, #lista input{width:200px} 
#lista dd{position:absolute; visibility:hidden;width:200px; background-color: #DFDFDF} 
#lista ul{ margin-top:2px; border:1px dashed #000; border-bottom:none} 
#lista li{ list-style: none; text-align:center; border-bottom:1px dashed #000; cursor: pointer} 
</style> 
</head> 
 
<body> 
<form> 
<dl id="lista"> 
  <dt><input id="algo" type="text" onfocus="document.getElementById('lista').getElementsByTagName('dd')[0].style.visibility='visible'" onkeypress="document.getElementById('lista').getElementsByTagName('dd')[0].style.visibility='hidden'" /></dt> 
  <dd><ul><li onclick="document.getElementById('algo').value=this.innerHTML;document.getElementById('lista').getElementsByTagName('dd')[0].style.visibility='hidden'">MTS</li><li onclick="document.getElementById('algo').value=this.innerHTML;document.getElementById('lista').getElementsByTagName('dd')[0].style.visibility='hidden'">C/U</li><li onclick="document.getElementById('algo').value=this.innerHTML;document.getElementById('lista').getElementsByTagName('dd')[0].style.visibility='hidden'">X1000</li></ul></dd> 
</dl> 
más cosas 
</form> 
</body> 
</html>

edu007ar · #3 (**permalink**) 20/12/2008, 18:05

Panino, impresionante....

muchas gracias, solo me resta ocuparme de los estilos..

Slds.
Eduardo