Live Search Javascript

Live Search Javascript - Javascript/Node.js - Programmation

Marsh Posté le 25-07-2019 à 10:00:48    

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 :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  6. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  7. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8. <script src="js/fil.js"></script>
  9. <link href="style.css" rel="stylesheet" type="text/css">
  10. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  11. <title>Document sans nom</title>
  12. </head>
  14. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  17. <form id="live-search" action="" class="styled" method="post">
  18.     <fieldset>
  19.         <input type="text" class="text-input" id="filter" value="" />
  20.     </fieldset>
  21. </form>
  23. <div class="box">
  24.     <div class="container">
  25.       <div class="row">
  27.       <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
  28.              
  29.     <div class="box-part text-center">
  30.                        
  31.                         <a href="#" title="" target="_blank"><img class="picto" src="img/cleemy.svg"></a>
  32.                        
  33.      <div class="title">
  34.       <h4>Cleemy</h4>
  35.      </div>
  36.                        
  37.      <div class="text">Gérer mes frais</div>
  38.                        
  39.      <a href="#" title="" target="_blank"><i class="fa fa-sign-in fa-1x"></i>Je me connecte</a>
  41.      <a style="font-size:13px;" href="#" title="" target="_blank"><i class="fa fa-envelope fa-1x"></i>J'ai une question</a>
  42.                        
  43.      </div>
  44.    </div>
  46.     <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
  47.              
  48.     <div class="box-part text-center">
  49.        
  50.         <a href="#" title="" target="_blank"><img class="picto" src="img/figgo.svg"></a>
  51.                    
  52.      <div class="title">
  53.       <h4>Figgo</h4>
  54.      </div>
  55.                        
  56.      <div class="text">
  57.       <span>Gérer mes congés</span>
  58.      </div>
  59.                        
  60.      <a href="#" title="" target="_blank"><i class="fa fa-sign-in fa-1x"></i>Je me connecte</a>
  61.  
  62.      <a href="#" title="" target="_blank"><i class="fa fa-envelope fa-1x"></i>J'ai une question</a>
  63.                      
  64.      </div>
  65.    </div>
  67.     <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
  68.              
  69.     <div class="box-part text-center">
  70.                        
  71.                         <a href="#" title="" target="_blank"><img class="picto" src="img/pagga.svg"></a>
  72.                        
  73.      <div class="title">
  74.       <h4>Pagga</h4>
  75.      </div>
  76.                        
  77.      <div class="text">
  78.       <span>Consulter mes fiches de paie</span>
  79.      </div>
  80.                        
  81.      <a href="#" title="" target="_blank"><i class="fa fa-sign-in fa-1x"></i>Je me connecte</a>
  82.  
  83.      <a href="#" title="" target="_blank"><i class="fa fa-envelope fa-1x"></i>J'ai une question</a>
  84.                    
  85.      </div>
  86.    </div>
  88.    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
  89.              
  90.     <div class="box-part text-center">
  91.                        
  92.                         <a href="#" title="" target="_blank"><img class="picto" src="img/poplee.svg"></a>
  93.                        
  94.      <div class="title">
  95.       <h4>Poplee</h4>
  96.      </div>
  97.                        
  98.      <div class="text">
  99.       <span>Consulter mon dossier RH</span>
  100.      </div>
  101.                        
  102.      <a href="#" title="" target="_blank"><i class="fa fa-sign-in fa-1x"></i>Je me connecte</a>
  104.      <a href="#" title="" target="_blank"><i class="fa fa-envelope fa-1x"></i>J'ai une question</a>
  105.                        
  106.      </div>
  107.    </div>
  110.  </div>
  111.     </div>
  112. </div>
  114. <body>
  115. </body>
  116. </html>


 
Code JS :  
 

Code :
  1. $(document).ready(function(){
  2.     $("#filter" ).keyup(function(){
  4.         // Retrieve the input field text and reset the count to zero
  5.         var filter = $(this).val(), count = 0;
  7.         // Loop through the comment list
  8.         $("div" ).each(function(){
  10.             // If the list item does not contain the text phrase fade it out
  11.             if ($(this).text().search(new RegExp(filter, "i" )) < 0) {
  12.                 $(this).fadeOut();
  14.             // Show the list item if the phrase matches and increase the count by 1
  15.             } else {
  16.                 $(this).show();
  17.                 count++;
  18.             }
  19.         });
  21.         // Update the count
  22.         var numberItems = count;
  23.         $("#filter-count" ).text("Number of Comments = "+count);
  24.     });
  25. });


 
Css ... :  

Code :
  1. /* CSS Document */
  3. body{
  4.     background: #eee;
  5.    
  6. }
  7. span{
  8.     font-size:15px;
  9. }
  10. a{
  11.   text-decoration:none;
  12.   color: #2A8A44;
  13.  
  14. }
  15. .box{
  16.     padding:60px 0px;
  17. }
  19. .box-part{
  20.     background:#FFF;
  21.     border: 1px solid #ccc;
  22.     border-radius:10px;
  23.     padding:60px 10px;
  24.     margin:30px 0px;
  25. }
  27. .box-part:hover {
  28.   box-shadow: 0 0 11px rgba(33,33,33,.2);
  29. }
  31. .box-part i {
  32.   margin-right:10px
  33. }
  35. .box-part a {
  36.   display: block;
  37.   color: #2A8A44;
  38. }
  40. .text{
  41.     margin:20px 0px;
  42. }
  44. .fa{
  45.      color:#4183D7;
  46. }
  48. .picto{
  49.   width: 80px;
  50. }


 
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... :bounce:  
 
Merci


---------------
Weuw!!!
Reply

Marsh Posté le 25-07-2019 à 10:00:48   

Reply

Marsh Posté le 25-07-2019 à 16:46:51    

Si ca peut rendre service, j'ai trouvé la solution... j'ai changé de script pour : https://www.jqueryscript.net/other/ [...] earch.html


---------------
Weuw!!!
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed