Discussion :

[Nympheasi]

Bonjour, je débute dans le monde de jquery, et j'aimerais trouver comment modifier une fonction trouvé sur le web qui envoie des requetes a une page search.php dès que je tape quelque chose dans un formulaire (champ texte).

Voici la partie jquery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <script type='text/javascript'> 
      $(document).ready(function(){ 
      $("#search_results").slideUp(); 
          $("#search_button").click(function(e){ 
              e.preventDefault(); 
              ajax_search(); 
          }); 
          $("#search_term").keyup(function(e){ 
              e.preventDefault(); 
              ajax_search(); 
          }); 
      });
 
      function ajax_search(){ 
        $("#search_results").show(); 
        var search_val=$("#search_term").val(); 
        $.post("templates/search.php", {search_term : search_val}, function(data){
         if (data.length>0){ 
           $("#search_results").html(data); 
         } 
        }) 
      } 
    </script>

et mon formulaire html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<h1>My Search</h1> 
 
    <form id="searchform" method="post"> 
      <div> 
          <label for="search_term">Search name/phone</label> 
          <input type="text" name="search_term" id="search_term" /> 
          <input type="submit" value="search" id="search_button" /> 
       </div> 
    </form>
 
    <div id="search_results"></div>

J'aimerais qu'aucune action ne soit faite avant que je ne clique le bouton search. Mais avec ce code cela ne fonctionne pas et continu a envoyer des requetes vers ma page search.php dès que je tape une lettre ou un chiffre.

Quelqu'un aurait une solution?

[Nympheasi]

Je crois que j'ai trouvé mon problème:

J'ai enlever cette partie de code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
          $("#search_term").keyup(function(e){ 
              e.preventDefault(); 
              ajax_search(); 
          });

[danielhagnoul]

Bonjour.

Exemple (on affiche la frappe, mais on n'exécute que lors du submit) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ajax_search(){ 
	$.post("templates/search.php", {search_term : $("#search_term").val()}, function(data){
		if (data.length > 0){ 
			$("#search_results").html(data); 
		} 
	});
}
 
$(function(){
	$("#search_results").slideUp();
 
	$("#search_term").keyup(function(e){ 
		e.preventDefault();
		$("#search_results").show().text($("#search_term").val());
	});
 
	$("#searchform").submit(ajax_search);
});

[Nympheasi]

Bonjour, je n'ai pas vraiment besoin de voir ce que je tappe dans le search box apparaitre dans le div au fur et à mesure que j'entre un chiffre donc je crois que le code suivant serait ok:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
      $(document).ready(function(){  
          $("#search_submit").click(function(e){ 
              e.preventDefault(); 
              ajax_search(); 
          });  
      });
 
      function ajax_search(){ 
        $("#search_results").show(); 
        var search_val=$("#search_term").val(); 
        $.post("templates/search.php", {search_term : search_val}, function(data){
         if (data.length>0){ 
           $("#search_results").html(data); 
         }
        }) 
      }

Par contre je me demandais comment afficher une image type loader pendant que ma recherche s'effectue (avant d'afficher le résultat)?