Cosas web, algunas úles, algunas buenas.
Fushioko, tiendas de productos de Asia

viernes, febrero 10, 2006

Caja de texto con autocompletado

Cada día son mayores las facilidades que ofrecen las páginas web para que el usuario se esfuerce lo menos posible. Una de ellas es el autocompletado de las cajas de texto, según se vaya escribiendo te aparece una lista con las posibles opciones o con sugerencias. Es lo que usa Google cuando te va mostrando lo más buscado.

A primera vista parece complicado, pero como se va a ver no lo es tanto, eso sí, quizás tiene varias cosas que hay que tener en cuenta, lo que lo convierte en un script un poco largo.

17 Comentarios:

  • Muy interesante, pero en Opera no funciona bien. Por lo menos en la 8.5 de Win que estoy usando ahora. Voy a ver en Firefox

    Por Anonymous rajasthani, a las 2/12/2006 10:38:00 a. m.  

  • Hola, gracias por detectarme un fallo, yo lo había probado también con Opera 8.51 y si me funcionaba en local, lo que no detecté es que cuando está metido en el iframe, se mueve todo el documento cuando pulso los cursores para arriba y para abajo, no solo la capa. Que raro, porque uso el scrollTop del DIV y no del document, ¿será que funciona así en Opera?. En Firefox supongo que si funcionará bien, porque yo es el navegador que uso para todo.

    Por Anonymous Luis, a las 2/12/2006 11:49:00 a. m.  

  • Hola Luis, encontré este tutorial tratando de solucionar un problema que tengo con mi autoseleccionado, pero veo que tu también lo tienes, quizás no te hayas dado cuenta y quizás ahora que te digo sepas como corregirlo...

    Al presionar rapidamente las teclas y como usas evento onkeyup llega un determinado momento en que toma el length del campo contando la parte seleccionada, intenta presionar casi dos teclas a la vez por ejemplo : E y S queriendo buscar España y verás como se autocompleta a Eslovenia, ojala sepas como solucionarlo, no sé que hacer... Gracias

    Por Blogger skid row, a las 7/15/2006 01:38:00 p. m.  

  • Hola, pues la verdad es que no había caido en ese error, ahora mismo no sé por qué puede ser, pero le echo un vistazo y te cuento.

    Por Anonymous Luis, a las 7/15/2006 02:13:00 p. m.  

  • Luis, otra consulta, sabes como deshabilitar la tecla enter para que no haga submit el formulario y sólo se dedique a seleccionar la opción y si la lista no esta desplegada que no haga nada??
    Saludos

    Por Blogger skid row, a las 7/16/2006 01:34:00 p. m.  

  • En esta entrada de Sentido Web, escribí sobre los shortcuts de teclado, puedes usar lo mismo para lo que tu quieres. Tan solo tienes que mirar si el keyCode es el enter y entonces evitas el evento, creo que lo tendrás que hacer en el onkeydown.

    Por Anonymous Luis, a las 7/16/2006 03:08:00 p. m.  

  • Hola nuevamente Luis, gracias nuevamente por responder... ya pude solucionar el problema que tenía con la tecla enter, lo solucioné con el evento onkeydown retornando false o true segun mi validación... pero tengo un problema en firefox, si bien tu pasas event en HTML como explicas en Sentido Web y todo va muy bien tanto para IE como para Firefox...como harías para pasar event como parámetro creando la llamada a la función desde javascript??, lo que pasa es que creo input type=text desde javascript y quiero darle al nuevo input creado la llamada a la función de autocompletado, pero lo tengo que crear desde javascript algo así: nuevo_input = createElement("INPUT"); nuevo_input.setAtttribute("type","text"); nuevo_input.onclick = autocomplete(aqui tengo que pasa event pero no estoy en HTML sino dentro de etiquetas javascript) como podría solucionar eso? Gracias

    Por Blogger skid row, a las 7/19/2006 11:21:00 p. m.  

  • Hola, ese problema que tienes tú, es algo que me ha pasado a mí muchas veces, hasta que por fín me puse a sacar cómo hacerlo, en el método ini que hay en esta entrada de Sentido Web hago una posible solución, no sé si la más correcta, pero si sé que funciona.

    Saludos

    Por Anonymous Luis, a las 7/20/2006 08:32:00 a. m.  

  • Hola, estuve tratando de entender lo que me dijiste que revisara, y si todo va muy bien tanto en IE como en Firefox, pero para serte sincero no entiendo muy bien cómo haces para que en Firefox no me bote error, no sé si me podrías explicar esa parte de tu código... gracias

    Por Blogger skid row, a las 7/20/2006 07:36:00 p. m.  

  • Hola de nuevo, el tema es que Firefox pasa como parámetro el objeto event por defecto. Si nos creamos una funcion:

    function prueba(evt) {
    ..
    }

    cuando la llamamos:

    prueba();

    Firefox realmente lo que hace es hacer esta llamada:

    prueba(event);

    Pero ten en cuenta que el objeto event como tal no existe, al igual que en IE, por eso en la parte de IE enviamos el objeto event (que cuelga del objeto window) y en Firefox no es necesario pasarselo a la función.

    Espero haberme explicado bien.

    Saludos

    Por Anonymous Luis, a las 7/20/2006 10:55:00 p. m.  

  • Hummm... creo que ahora se me complica más... ya que a la función que creo en javascript debo de pasarle otros parámetros, algo así:
    nuevo_input = createElement("INPUT"); nuevo_input.setAtttribute("type","text"); nuevo_input.onclick = autocomplete(parametro1, parametro2, aqui tengo que pasa event pero no estoy en HTML sino dentro de etiquetas javascript)... en este caso como haría?? no hay alguna manera de trabajar la cadena "event" para colocarla ahí como lo harías dentro de etiquetas HTML?? Gracias

    Por Blogger skid row, a las 7/21/2006 12:49:00 a. m.  

  • Cada vez me haces más difícil responderte... pero eso me gusta, porque así aprendo.

    Posible solución, tienes un método en el que creas el objeto, al que llamas desde el onload (por ejemplo)
    body onload="ini()"
    y luego en este método creas el objeto y le creas el evento onclick

    var obj=document.createElement("INPUT");
    obj.type="text";
    if (window.event) {
    obj.onclick = function() { otracosa(event, "valor") };
    } else {
    obj.onclick = function(evt) { otracosa(evt, "valor") };
    }

    y luego la funcion a la que se le llama:

    function otracosa(evt, txt) {
    alert(evt);
    alert(txt);
    }

    Creo que es esto a lo que te refieres, no?

    Saludos
    document.body.appendChild(kk);

    Por Anonymous Luis, a las 7/21/2006 08:07:00 a. m.  

  • Gracias Luis, justo anoche lo llegué a resolver... simplemente en la parte donde llamo a la funciónla llamo así:

    obj.onclick = function(evt) {
    if(evt==null)
    evt=event;
    nuevo_input(parametro1, parametro2, evt};
    }

    y funciona... parecidisima a la solucion que me das, gracias por todo Luis, ahora ya todo funciona en IE y en FF... al propósito pudiste solucionar el autoseleccionado?

    Por Blogger skid row, a las 7/21/2006 06:04:00 p. m.  

  • Hola.

    Me alegro que lo hayas solucionado. Lo siento, pero no he tenido nada de tiempo para solucionar lo del autoselect.

    Por Anonymous Luis, a las 7/21/2006 09:59:00 p. m.  

  • Hola Luis, se que la pregunta que tengo ya te la han echo y has posteado un link pero no encuentro la solución.
    Eh creado una cajita como la tuya y en el evento onKeyUp llamo a una funcion javascript, esta funcion controla la flecha arriba(seleciona en un list index-1),flecha abajo y el enter en el cojo el elemento seleccionado del list.El problema es el dichoso enter, no lo quiero desactivar pero tampoco quiero que me haga post-back...
    Alguna idea?

    Por Blogger Ivan, a las 8/08/2006 07:57:00 p. m.  

  • HOLA:

    tengo un problema con automplete ya que he realizado la modificación para desplegar los datos que extraigo de una base de datos y son almacenados en un archivo con la finalidad que se lea desde ajax para autocompletar en el formulario.
    PROBLEMA
    ALMACENA LOS REGISTROS DE LA bd EN FORMA HORIZONTAL POR LO CUAL NO PUEDE SER LEIDA
    REQUIERO QUE LOS DATOS SE ALMACENEN EN FORMA VERTICAL
    ¡ALGUIEN SABE HACERLO CON ALGUNA INSTRUCCION EN PHP??

    Gracias

    Por Anonymous Anónimo, a las 6/13/2008 08:21:00 p. m.  

  • Gracias, estaba en la búsqueda de esta herramienta autocompletar para mi web.

    Por Anonymous recursos humanos peru, a las 2/27/2010 04:45:00 a. m.  

Publicar un comentario

<< Inicio