Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
425 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Live Search Javascript

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Live Search Javascript

n°2337184
Johnlemon
Have a break, have a Jack
Posté le 25-07-2019 à 10:00:48  profilanswer
 

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


 
Code JS :  
 

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


 
Css ... :  

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


 
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!!!
mood
Publicité
Posté le 25-07-2019 à 10:00:48  profilanswer
 

n°2337239
Johnlemon
Have a break, have a Jack
Posté le 25-07-2019 à 16:46:51  profilanswer
 

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


---------------
Weuw!!!

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Live Search Javascript

 

Sujets relatifs
Soucis Regex et string.search javascript[Résolu] Timer Javascript - Changer temps de base
Passage de paramètre du PHP au Javascript[JAVASCRIPT] JSON.parse()
[HTML/CSS][JavaScript] Récupérer un ID sur une autre page Web[RÉSOLU] [Javascript/HTML] Uncaught ReferenceError: x is not defined
Image bouton html JavaScriptBouton skype (code javascript) pas reconnu dans html du site Jimdo
Formulaire Calcul HTML Javascript Help! 
Plus de sujets relatifs à : Live Search Javascript


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR