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

Aporte Buscador de Clases[jQuery]

Tema en 'Jquery' comenzado por AngelKrak, 8 de Julio de 2016.

  1. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    946
    Me gusta recibidos:
    362
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    [​IMG]
    Hola amigos, esta vez les traigo un pequeño Aporte y es un Buscador de Clases(Esta vez no es de Palabras), que es lo que hace el Buscador?
    Muestra los Div con la Clase Buscada en el input y oculta los Demas.

    HTML:
    <input type="text" name="search" placeholder="¿Que Quieres Buscar?" />

    <section class="animes">
    <div class="naruto">
      <h3>Naruto</h3>
      <img src="https://s-media-cache-ak0.pinimg.com/236x/5c/15/73/5c1573d657c9c48b1e41b3ad8627e528.jpg" />
    </div>
    <div class="dbz">
      <h3>Dragon Ball Z</h3>
      <img src="http://www.oocities.org/tino_lajos/goku_gohan_goten_trunks.jpg" />
    </div>
    <div class="naruto">
      <h3>Naruto</h3>
      <img src="http://pre00.deviantart.net/fad4/th/pre/i/2014/107/8/a/naruto_673_the_final_fight_by_m_shu-d7ep90m.jpg" />
    </div>
    <div class="one piece">
      <h3>One Piece</h3>
      <img src="http://orig05.deviantart.net/7783/f/2012/225/9/f/luffy_vertical_sig_by_guns918spyder-d5ay2wf.png" />
    </div>
    <div class="fairy tail">
      <h3>Fairy Tail</h3>
      <img src="http://orig15.deviantart.net/2d5d/f/2012/212/4/d/fairy_tail___vertical_by_perassolli-d59bq9p.png" />
    </div>
    </section>
    Código (CSS):
    input {
      border: 1px solid #ddd;
      outline: none;
      padding: 10px;
      margin: 5px 0;
    }
    .animes {
      display: flex;
      justify-content: center;
      align-content: center;
    }
    .animes div {
      width: 280px;
      margin-right: 10px;
    }
    .animes div:last-child {
      margin-right: 0;
    }
    .animes div img {
      width: 100%;
    }
    div h3 {
      border-bottom: 1px solid #ddd;
      padding-left: 5px;
      padding-bottom: 5px;
      margin-bottom: 8px
    }

    @media all and (max-width: 480px) {
      .animes {
        display: block;
        margin: 0 auto;
        width: 95%;
      }
      .animes div {
        width: 100%;
      }
    }
    Código (Javascript):
    $("input").keyup(function() { //Funcion al Escribir en el Input ejecutamos el Siguiente Codigo
      var get = "." + $("input").val(); //Creamos la Variable que obtendra lo que Escribimos en el Input mas el Punto agregado(Clase)
      $("div").show().not(get).hide(); //Mostramos los Resultados de la Busqueda y Ocultamos los que no Coincidan
    });
    El Script fue hecho por @Maddenamy asi que los Agradecimientos son para el :D jejeje xD

    Espero y les aya gustado, el Script se los Comente por si querian saber para que sirve cada Funcion, de todos modos si me equivoque en algo comentenme e igualmente si tienen dudas preguntenme.

    Aqui les dejo una Demo:
    http://codepen.io/AngelKrak/pen/wWAWmr

    y la Descarga:
    http://codepen.io/AngelKrak/share/zip/wWAWmr/
     
    A ManuXpy le gusta esto.
  2. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    421
    Me gusta recibidos:
    260
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Es parecido al buscador que publicaste hace un tiempo, que me sigue gustando mas que este. Estaría bueno que no detecte mayusculas, porque cuando pongo Naruto, no me aparece nada, pero cuando pongo naruto, si, pero aún así, es un buen ejercicio!

    PD: Gracias por el POST en español (????
     
    A AngelKrak le gusta esto.
  3. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    946
    Me gusta recibidos:
    362
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    jejeje si, pero por si alguien tambien buscaba algo asi por eso lo publique(Fue idea de Julian "The Boy", el queria verlo) y eso de ser Sensible a las Mayusculas es problema de js, no se puede "arreglar" :/ solamente necesitas o escribirlo todo en mayúsculas o minúsculas :/
     
  4. Maddenamy

    Maddenamy Miembro conocido

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    817
    Me gusta recibidos:
    428
    Puntos de trofeos:
    63
    Ocupación:
    Estudiante
    Localización:
    México
    Página web:
    Claro que se puede arreglar, sólo es cuestión de convertir el valor del input en minúsculas y ya.
    Código (Javascript):
    var get = "." + $("input").val().toLowerCase();
    Ahora si se puede, aunque escribas Naruto o naruto (o rellenuto) es lo mismo. :p
     
    A AngelKrak le gusta esto.
  5. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    946
    Me gusta recibidos:
    362
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    pero si la clase no esta en minúsculas de nada serviria jajaja xD
     
  6. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    421
    Me gusta recibidos:
    260
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    JAJAJAJAJAJAJAJA Ay morí XDDD
     
    A AngelKrak le gusta esto.

Comparte esta página