buscar filas de una tabla con las teclas

edu007ar · #1 (**permalink**) 25/12/2006, 20:39

a ver si se entiende lo que quiero hacer..

suponiendo que tengo una tabla de una columna y muchas filas, cada fila con un nombre distinto de cliente. Necesito entonces realizar búsquedas rápida de clientes presionando teclas, si un cliente se llama PEDRO y estoy al principio de la página y presiono la tecla "p" vaya al primer nombre de cliente que empiece con "p", luego presiono "e" y se posiciona en el primero que empieza con "pe", y así.....

por supuesto todo esto sin recargar la página ni nada, que simplemente se vaya focalizando la fila que contenga el nombre del cliente que empiece con la combinacion de teclas presionadas.... igual a como funciona por ejemplo el explorador de windows, donde tenés una lista larga de archivos y para buscar uno vas escribiendo el nombre y se van seleccionando a medida que corresponde.... obviamente si hay cierta demora entre letras tecleadas la búsqueda vuelve a empezar...

Bueno, espero que sea posible.. no sé si con js u otra tecnología...

Gracias.
Slds.
Eduardo.

JavierB · #2 (**permalink**) 26/12/2006, 01:51

Hola edu007ar

Tengo algo parecido, es un código para filtrar filas en una tabla. Espero que te sirva.

Saludos,

edu007ar · #3 (**permalink**) 26/12/2006, 06:18

Gracias JaviarB, creo que me va a servir...

muy bueno el ejemplo...

slds..

edu007ar · #4 (**permalink**) 28/12/2006, 10:17

Bueno, les paso como quedó el código de javierB modificado a mi gusto para el trabajo que tenía que hacer.... creo que quedó bastante funcional y rápido de utilizar con el teclado:

Código HTML:

<html>
<head>

<script language="javascript">
var colum=0;
var valor;
function filtra(txt) {
t = document.getElementById('tab');
filas = t.getElementsByTagName('tr');
for (i=1; ele=filas[i]; i++) {
texto = ele.getElementsByTagName('td')[colum].innerHTML.toUpperCase();
posi = (texto.indexOf(txt.toUpperCase()) == 0);
ele.style.display = (posi) ? '' : 'none';
}
}
</script>

<script language="JavaScript">
document.onkeydown = function(){
if(window.event.keyCode == 27){
document.getElementById('txt').value="";
filtra('');
document.getElementById('txt').focus();
return false;
}
}
</script>

</head>

<body>
<table width="200" cellpadding="2" cellspacing="1" bgcolor="#000000" id="tab" style="font-family: tahoma; font-size:11px; ">
<tr bgcolor="#FFFFFF">
<td colspan="3">
  <div align="center">
    Filtrar: 
      <input name="txt" type="text" id="txt" size="10" onKeyUp="filtra(this.value)">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="50%">Alberto</td>
<td width="25%"><div align="center">
  <input name="textfield" type="text" size="2">
</div></td>
<td width="25%"><div align="center">
  <input name="textfield2" type="text" size="2">
</div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Alicia</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Aandres</td>
<td><div align="center">
  <input name="textfield" type="text" size="2">
</div></td>
<td><div align="center">
  <input name="textfield2" type="text" size="2">
</div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Benito</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Bernardo</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Edgardo</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Eduardo</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Jose</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Pedro</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Pepe</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Santiago</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Santoro</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Yolanda</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Zulema</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
</table>
</body>
</html>

reciclé una función de keycode para poder presionar ESC en cualquier lugar para quitar el filtro y volver al campo de busqueda y seguir escribiendo.... de esta manera se pueden ir ingresando movimientos de cliente sin utilizar el mouse..... y descubrí que presionando ESC luego de escribir un valor en los campos de los clientes NO BORRA LO QUE SE ACABA DE ESCRIBIR!.

de la función original de javierB quité la opcion de busqueda empezando del final y del medio, por lo tanto solo busca al principio de las cadenas que es como yo quería...

Espero que les sirva..

Gracias.
Slds.