Bonjour à tous,
J'ai un petit problème un script js que je n'arrive pas à faire fonctionner correctement...
C'est une simple page avec un champ qui permet de filtrer en temps réel les éléments d'une page
Code HTML :
Code JS :
Code :
- $(document).ready(function(){
- $("#filter" ).keyup(function(){
- // Retrieve the input field text and reset the count to zero
- var filter = $(this).val(), count = 0;
- // Loop through the comment list
- $("div" ).each(function(){
- // If the list item does not contain the text phrase fade it out
- if ($(this).text().search(new RegExp(filter, "i" )) < 0) {
- $(this).fadeOut();
- // Show the list item if the phrase matches and increase the count by 1
- } else {
- $(this).show();
- count++;
- }
- });
- // Update the count
- var numberItems = count;
- $("#filter-count" ).text("Number of Comments = "+count);
- });
- });
|
Css ... :
Code :
- /* CSS Document */
- body{
- background: #eee;
-
- }
- span{
- font-size:15px;
- }
- a{
- text-decoration:none;
- color: #2A8A44;
-
- }
- .box{
- padding:60px 0px;
- }
- .box-part{
- background:#FFF;
- border: 1px solid #ccc;
- border-radius:10px;
- padding:60px 10px;
- margin:30px 0px;
- }
- .box-part:hover {
- box-shadow: 0 0 11px rgba(33,33,33,.2);
- }
- .box-part i {
- margin-right:10px
- }
- .box-part a {
- display: block;
- color: #2A8A44;
- }
- .text{
- margin:20px 0px;
- }
- .fa{
- color:#4183D7;
- }
- .picto{
- width: 80px;
- }
|
J'ai bien compris que la selection des éléments à afficher se fait à la ligne 8 du fichier js, j'ai je n'y arrive pas...
soit le titre des bloques disaprait, soit l'image... soit les liens...
J'aimerais que lorsque l'utilisateurs fait une recherche, seul les bloques (complets...) restent affichés.
Pour infos, j'ai utiliser jQuery live Search : https://jsfiddle.net/5s2o4we6/
Si quelqu’un a une idée... 
Merci
---------------
Weuw!!!
