select seleccionado

guntin_java · #1 (**permalink**) 18/11/2004, 18:24

Hola...

esta pregunta la hice en otra ocasión pero aún no he podido resolver mi problema, he revisado los faq y allí no encuentro la solución para mi problema.

esta vez explicaré con más detalles.
tengo una lista 'nombres' de más de 350 items(nombres), el usuario puede seleccionar de la lista más de un item que pasará a la base de datos (para ello uso php, con esto no tengo problemas).

el problema es: cómo debo mostrar la lista para que el sea facil al usuario seleccionar las que le interesa. en un principio utilicé checbox pero entonces pinto 350 checbox y es muy complicado seleccionar el item importante.

que mecanismo me aconsejan utilizar para que sea amigable al usuario.

muchas gracias

guntin_java · #2 (**permalink**) 19/11/2004, 08:16

...hola otra vez

he pensado que una buena option para que el usuario pudiera seleccionar varios item sería un control (pensé en un select) donde mientras el teclee, el control, se posecione en la palabra (item) correcta.

por ejemplo: el usuario teclea la letra 'm' y el control se poseciona en la lista donde comienza con 'm' después el usuario teclea la letra 'a' y se pocesiona en la lista en las palabras que comiencen con 'ma' y así sucesivamente hasta que el usuario termine de teclear o seleccione el item pocesionado.

después solo tendría que pasar ese item seleccionado a otro control y conformar la lista de item seleccionado.

la idea es buena, pero NO SE COMO SE HACE, de javascript conozco muy poco, todo lo programo en php,
si alguien pudiera ayudarme con esto.
mil gracias

guntin_java · #3 (**permalink**) 19/11/2004, 13:27

Lo que estoy diciendo es una locura y no puede hacerse...???

guntin_java · #4 (**permalink**) 20/11/2004, 07:12

Conocen otro foro de javascript?????

furoya · #5 (**permalink**) 21/11/2004, 12:43

Hola guntin_java :

Estaba tratando de averiguar de dónde lo saqué, porque no es mío. Pero por tu insistencia supongo que es urgente y no puedes esperarme; así que aquí va uno de los cientos de códigos parecidos que debe haber en más de una javascriptería.

Código:

 

<html>
<head>
<title>Busqueda en lista</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head> 

<body bgcolor="#FFFFFF" text="#000000" onLoad="cargarLista();">

<form id="formulario" name="formulario">
Buscar: <input type="text" id="busca" name="busca" onKeyUp="buscar();"><br/>
Listado: <select id="miCombo" name="miCombo" size=8>
</select>
</form>


<script>

  // Defino el array con los datos
  lista = new Array('Atletismo ','Aerobic','Balonmano','Beisbol','Badminton','Baloncesto','Footing','Fútbol','Gimnasia','Voleibol');

  function cargarLista() {
    // Cargamos el combo
    for (x=0;x<lista.length;x++)
      document.formulario.miCombo[x] = new Option(lista[x]);
  }


  function buscar() {

    limpiarLista();

    // Obtengo el valor del texto
    texto = document.formulario.busca.value;

    // Creo la expresión regular
    expr = new RegExp("^" + texto,"i");

    // Recorro la lista. Si la expresión regular es OK
    y = 0;

    for (x=0;x<lista.length;x++) {
      if (expr.test(lista[x])) {
        document.formulario.miCombo[y] = new Option(lista[x]);
        y++;
      }
    }


  }

  function limpiarLista() {
    for (x=document.formulario.miCombo.length;x>=0;x--)
      document.formulario.miCombo[x] = null; 
  }

</script>

</body>
</html>

saludos

furoya

guntin_java · #6 (**permalink**) 21/11/2004, 19:59

mil gracias furoya, yo también busqué en la red y encontré esto en hotscripts, creo que sería conveniente que el moderador lo pusiera en las faq, pues allí no hay nada parecido:

Código:

<SCRIPT LANGUAGE="Javascript 1.2" type="text/javascript">
/*

	Please keep the following lines visible, in recognition of my work...

	************************	
	Author: Max Holman <[email protected]>
	Date  : Sun, 21 Jan 2001
	************************

	This functions lets users type in letters to select an option in your SELECT form fields.

	Usually the browser only takes notice of single keystrokes and switches to the first Option that
	begins with that letter.

	This scripts buffers the users input and compares it against the OPTIONs in the SELECT field, 
	choosing the closest match as you type


	Cut and Paste this text into your HTML file or into a separate .js file for inclusion on your site.

	Usage:	<SELECT onKeyPress = "return shiftHighlight(event.keyCode, this);">	

	Platform: Only tested on IE5 (Win) - will not work on Netscape


*/

	var timerid     = null;
	var matchString = "";
	var mseconds    = 1000;	// Length of time before search string is reset

	function shiftHighlight(keyCode,targ)
	{

		keyVal      = String.fromCharCode(keyCode); // Convert ASCII Code to a string
		matchString = matchString + keyVal; // Add to previously typed characters

		elementCnt  = targ.length - 1;	// Calculate length of array -1

		for (i = elementCnt; i > 0; i--)
		{

			selectText = targ.options[i].text.toLowerCase(); // convert text in SELECT to lower case

			if (selectText.substr(0,matchString.length) == 	matchString.toLowerCase())
			{

				targ.options[i].selected = true; // Make the relevant OPTION selected

			}

		}

		clearTimeout(timerid); // Clear the timeout
		timerid = setTimeout('matchString = ""',mseconds); // Set a new timeout to reset the key press string
		
		return false; // to prevent IE from doing its own highlight switching

	}
</SCRIPT>
<SELECT NAME=TEST onKeyPress = "return shiftHighlight(event.keyCode, this);">....