Marcar elemento de una lista

Holden · #1 (**permalink**) 28/01/2003, 20:44

Hola gente necesito hacer los siguiente:
Tengo un elemento select donde se cargan una serie de productos.Tambien tengo un imputbox donde se debe tipear el nombre del producto que se desea. Lo que necesito hacer es que cada vez que se tipee en el imput box, se ponga seleccionado el elemento del select mas proximo a lo escrito en el imput.
Para ser mas grafico les dejo una foto de lo que quiero:

Espero que alguien me pueda ayudar un poco con esto.
Gracias como siempre.

Kaopectate · #2 (**permalink**) 28/01/2003, 22:11

Hola Holden.

Revisa el FAQ-60 que creo que te viene como anillo al dedo.

Saludos.

Holden · #3 (**permalink**) 28/01/2003, 22:46

Hola, ya estube viendo ese mensaje y de hecho intente hacer algunas modificaciones pero mi nivel de js es muy basico.
El problema es que al escribir en el imput desaparecen las opciones que no se ajsutan con lo ingresado. Mi idea es que solo se destaque la que mas se ajsute y no que solo se vea la que mas se ajusta. me explico?
en el ejemplo las demas opciones desaparecen de hecho si pones alguna palabra que no esta dentro del select se queda vacio. Me gustaria, en lo posible, que se vea tal cual la foto que anexe.
Si alguien contribuye con mi causa se agradece.

Kaopectate · #4 (**permalink**) 28/01/2003, 22:48

Ok.

Mañana te preparo un ejemplito si no es que alguien se adelanta.

Saludos.

Kaopectate · #5 (**permalink**) 30/01/2003, 12:11

Hola Holden.

Disculpa la tardanza, me había olvidado por completo del problema. He hecho el siguiente ejemplo, revísalo y dime si te resuelve o no.

Código PHP:

  <html>

 <head>

  <script language="JavaScript">

 
   function evalua(sOpc, sTxt){

    var nRes = 0;

    for (var i = 0; i < sTxt.length && i < sOpc.length && sOpc.charAt(i) == sTxt.charAt(i); i++)

     nRes++;

    return nRes;

   }

 
   function cambia(oCntrl){

    var txtVal = document.frm.txt.value;

    var nAnt = -1;

    var nBest = -1;

    var nAct;

 
    for (var i = 0; nBest == -1 && i < oCntrl.options.length; i++){

     nAct = evalua(oCntrl.options[i].text, txtVal);

     if (nAct < nAnt) nBest = i - 1;

     nAnt = nAct;

    }

    oCntrl.selectedIndex = nBest;

   }

  </script>

 </head>

 <body onload="cambia(document.frm.lista)">

  <form name="frm">

   <table border="0">

    <tr>

     <td>

      Ciudad:

     </td>

     <td>

      <input type="text" name="txt" onkeyup="cambia(document.frm.lista)">

     </td>

     <td>

      <select name="lista">

       <option value="0">Centro de mesa</option>

       <option value="1">Manteles</option>

       <option value="2">Mantas</option>

       <option value="3">Servilletas</option>

       <option value="4">Toallas</option>

      </select>

     </td>

    </tr>

   </table>

  </form>

 </body>

</html>

Saludos.

Holden · #6 (**permalink**) 30/01/2003, 12:31

Amigo te acabas de ganar el cielo.
Gracias.

Kaopectate · #7 (**permalink**) 30/01/2003, 12:33

Solo espero que el premio no se haga efectivo de inmediato.

Kaopectate · #8 (**permalink**) 30/01/2003, 23:03

Pequeño maquillaje:

Código PHP:

  <html>

 <head>

  <script language="JavaScript">

 
   function evalua(sOpc, sTxt){

    var nRes = 0;

    for (var i = 0; i < sTxt.length && i < sOpc.length && sOpc.charAt(i) == sTxt.charAt(i); i++)

     nRes++;

    return nRes;

   }

 
   function cambia(oCntrl){

    var txtVal = document.frm.txt.value;

    var nAnt = -1;

    var nBest = -1;

    var nAct;

 
    for (var i = 0; nBest == -1 && i < oCntrl.options.length; i++){

     nAct = evalua(oCntrl.options[i].text, txtVal);

     if (nAct <= nAnt) nBest = i - 1;

     nAnt = nAct;

    }

    oCntrl.selectedIndex = nBest;

   }

  </script>

 </head>

 <body onload="cambia(document.frm.lista)">

  <form name="frm">

   <table border="0">

    <tr>

     <td>

      Ciudad:

     </td>

     <td>

      <input type="text" name="txt" onkeyup="cambia(document.frm.lista)">

     </td>

     <td>

      <select name="lista">

       <option value="0">Centro de mesa</option>

       <option value="1">Mantas</option>

       <option value="2">Manteles</option>

       <option value="3">Servilletas</option>

       <option value="4">Toallas</option>

      </select>

     </td>

    </tr>

   </table>

  </form>

 </body>

</html>

Saludos.

Holden · #9 (**permalink**) 19/02/2003, 10:39

Despues de un tiepo vuelvo a la carga con el mismo tema...

No me funciona la comestica... :(. No reacciona.

Mi gran pregunta es funciona tanto apra Netscape como para IExplorer? Porque lo probe en netscaper 4.5 y no way!

Gracias