1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Buscador de Palabras[JS]

Tema en 'Tutoriales de Javascript' comenzado por AngelKrak, 9 de Octubre de 2015.

  1. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.013
    Me gusta recibidos:
    406
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    [​IMG]
    Hola HDLW, aquí les traigo un nuevo Tutorial que me pidió un amigo @Dannys1899. Es sobre un Buscador que Busca:oops:jajaja ok no psz, Solamente es un Buscador de Palabras hecho con JS, Espero y les guste:D

    Primero que nada ya saben, Agregamos la Librería de JQUERY y los Estilos de la pagina:
    Código (Text):
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    Ahora vamos a agregar nuestro Contenedor con el ID tarjetas, ese sera el que contendrá tanto los resultados como el Buscador:
    HTML:
    <div id="tarjetas"></div>
    Ahora agregaremos la Tabla con el ID y CLASE tabla(va adentro del Contenedor):
    HTML:
    <table id="tabla" class="tabla"></table>
    Agregamos el Buscador(va adentro de la Tabla):
    HTML:

        <tr class="buscador">
            <td class="buscador"><input type="text" id="tfBuscar" class="Buscador" placeholder="Buscar..." /></td>
        </tr>
     
    Ahora agregamos las Filas y Celdas(van adentro de la Tabla):
    HTML:

        <tr class="head">
            <th class="head">Numeros</th>
        </tr>
        <tr>
            <td class="tarjeta">Uno</td>
        </tr>
        <tr>
            <td class="tarjeta">Dos</td>
        </tr>
        <tr>
            <td class="tarjeta">Tres</td>
        </tr>
        <tr>
            <td class="tarjeta">Cuatro</td>
        </tr>
        <tr>
            <td class="tarjeta">Cinco</td>
        </tr>
     
    Ahora agregaremos los Resultados(se calculan automáticamente, va adentro de la tabla también):
    HTML:
        <tr class="resultados">
            <th><span class="resultados"></span></th>
        </tr>
    y por ultimo(antes del body final) agregamos el enlace al JS:
    Código (Text):
    <script type="text/javascript" src="js/index.js"></script>
    --------------------------------------------------------------------------------------------------------------------------------------------
    Ahora vamos a agregar los Estilos(como solo ahi estilos Predeterminados que imagino ya la mayoría saben para que son, no explicare para que sirve cada uno jejeje xD):
    Código (CSS):
    @import url(https://fonts.googleapis.com/css?family=Lora:400,700italic);

    * {
        margin: 0;
        padding: 0;
    }
    ::-webkit-input-placeholder {
        color: #fff;
    }
    ::-moz-placeholder {
        color: #fff;
    }
    body {
        background: url("https://static.pexels.com/photos/9316/notebook-office-writing-table.jpg");
        background-size: cover;
        color: #fff;
        font-family: 'Lora', serif;
    }
    body:after {
        content: "";
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .4);
        z-index: -1;
    }
    .Buscador {
        background: url("../img/search.png") no-repeat 9px center;
        color: #fff;
        border: 1px solid #DDDDDD;
        border-radius: 3px;
        padding: 9px 10px 9px 32px;
        margin: 3px;
        outline: none;
        position: absolute;
        right: 0;
        width: 20%;
        transition: 1s all ease;
    }
    .tabla, tr, th, td {
        width: 100%;
        max-width: 640px;
        padding: 9px;
        border: 1px solid #ddd;
        border-collapse: collapse;
        margin: 15% auto;
    }
    #tabla {
        position: relative;
    }
    tr.buscador, td.buscador, tr.head, th.head {
        border: 0;
    }
    td.buscador {
        padding: 0;
    }
    th.head {
        padding: 12px;
    }
    --------------------------------------------------------------------------------------------------------------------------------------------

    Ahora vamos con los JS(lo trae todo explicado, así no explico por aquí jejeje xD):
    Código (Javascript):

    /* Funcion del Buscador de Palabras */
    $(document).on("ready", main);
    function main() {
        $("#tfBuscar").on("keyup", buscar); //es como el onclick del input
    }
    function buscar(){
        var tarjetas = $(".tarjeta"); //La clase del Contenedor
        var texto = $("#tfBuscar").val(); //El ID del Buscador
        texto = texto.toLowerCase(); //Devuelve el valor en Minisculas de la cadena...
        tarjetas.show(); //Mostramos los Resultados
        $(".resultados").show(); //Mostramos el Resultado Automatico
        for(var i=0; i< tarjetas.size(); i++){
            var contenido = tarjetas.eq(i).text();
            contenido = contenido.toLowerCase();
            var index = contenido.indexOf(texto);
        if(index == -1){
            tarjetas.eq(i).hide(); //Ocultamos los Resultados que no Concuerden con lo escribido
            $(".resultados").hide(); //Ocultamos los Resultados
            }
        }
    }

    /* Estilos del buscador al Hacer click */
    var click = 0; //creamos la variable
    $(".Buscador").click(function(){ //detectamos el click
        if(click == 0){ //si la variable es igual a 0
            click = 1; //cambiamos su valor a 1
            $(".Buscador").animate({ //hacemos la animcacion de alargar el ancho del Buscador
            width: "30%"
            });
            $(".Buscador").css({ //aplicamos los nuevos estilos
            "border": "1px solid #ff0000",
            "box-shadow": "0px 0px 5px 0px #ff0000"
            });
        }
        else { //sino
            click = 0; //reiniciamos la variable
            $(".Buscador").animate({//devolvemos los estilos originales
            width: "20%"/* valor inicial */
            });
            $(".Buscador").css({ //devolvemos los estilos originales
            "border": "1px solid #DDDDDD", /* valor inicial */
            "box-shadow": "none" /* valor inicial */
            });
        }
    });

    // Hacemos la Function para Recargar los Resultados
    function resultados(){

    /* Contador de Resultados */
    var n = $(".tarjeta").length;
    $("span.resultados").text("Se encontraron " + n + " Resultados.");
    }

    // Establecemos el temporizador a 1 segundos
    timer = setInterval("resultados()", 1000);
     
    Demo:
    Codepen

    Descarga:
    Codepen | Mega | Mediafire
     
    A gammafp, RodrigoT, Maddenamy y 1 persona más les gusta esto.
  2. Dannys1899

    Dannys1899 Nuevo Miembro

    Se incorporó:
    24 de Agosto de 2015
    Mensajes:
    26
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    excelente trabajo angelkrak de mucha utilidad
     
  3. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.013
    Me gusta recibidos:
    406
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    de nada, que bueno que te gusto ;)
     
  4. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    748
    Me gusta recibidos:
    185
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Muy bueno el tutorial ;) excelente el buscador no sabia que se podían hacer sin php y bases de datos. Una cosa las palabras que hay en la tabla las usa como base de datos no? Y otra cosa cuando pones una palabra que no esta en la "base de datos" el buscador se queda sin linea de abajo.
    2015-10-10_12-09-25.png
     
  5. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    768
    Me gusta recibidos:
    320
    Puntos de trofeos:
    63
    Género:
    Hombre
    Tienes mal el enlace de CODEPEN.
     
  6. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    748
    Me gusta recibidos:
    185
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    @gammafp a mi me funcionan los dos :confused:
     
  7. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    768
    Me gusta recibidos:
    320
    Puntos de trofeos:
    63
    Género:
    Hombre
    El de codepen no te redirecciona a codepen sino que te descarga un archivo cuando lo esperado es que te mande al demo en codepen.io
     
  8. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    748
    Me gusta recibidos:
    185
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    A AngelKrak le gusta esto.
  9. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    768
    Me gusta recibidos:
    320
    Puntos de trofeos:
    63
    Género:
    Hombre
  10. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.013
    Me gusta recibidos:
    406
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    si amigo, puedes mostrarlas desde una DB tambien solo con que tengan la Clase tarjeta y funcionara ;) y lo del borde, gracias por avisar :D
    Al final del CSS le ponemos un border-bottom: 1px solid #ddd;
    Código (CSS):
    th.head {
        padding: 12px;
    }
     
  11. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    748
    Me gusta recibidos:
    185
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    A ver si he entendido lo que dices jajaja Dices que supongo las palabras en un DB con la clase tarjeta funcionara tb? De nada :)
     
  12. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.013
    Me gusta recibidos:
    406
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    por ejemplo si tu contenido lo tienes es una base de datos, haces conexion a ella, y la sacas mediante un echo o algo asi pero con la clase tarjeta, algo asi:
    echo "<div class='tarjeta'>Aqui pones lo que sea que tengas o quieras poner de tu base de datos ;)</div>";
     
  13. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    748
    Me gusta recibidos:
    185
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Valee muchas gracias :)
     
  14. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.013
    Me gusta recibidos:
    406
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    de nada amigo ;)
     
  15. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    768
    Me gusta recibidos:
    320
    Puntos de trofeos:
    63
    Género:
    Hombre

Comparte esta página