Bonjour,

j'effectue actuellement une recherche d'après l'autocompletion sur plusieurs champs.

Je souhaite rajouter un bouton pour relancer la recherche manuellement.

Voici mon code 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//Autocomplete client
$(".recherche-vendeur").autocomplete({
	source: function(request, response) {
		var nom_enseigne=$('#nom_enseigne').val();
		var nom_exploitant=$('#nom_exploitant').val();
		var adresse=$('#adresse').val();
		var cp=$('#cp').val();
		var ville=$('#ville').val();
		var telephone=$('#telephone').val();
		if($('#sans_enseigne').is(':checked'))
		{
			var sans_enseigne=1;
		} else
		{
			var sans_enseigne=0;
		}
		$.getJSON("action_recherche.php", { term: request.term, nom_enseigne:nom_enseigne, sans_enseigne:sans_enseigne, nom_exploitant:nom_exploitant, adresse:adresse, cp:cp, ville:ville, telephone:telephone, cas:'1'}, 
		response);
	},
        minLength: 2,
        select: function(event, ui) {
                $('#nom_enseigne').val(ui.item.nom_enseigne);
		var targetUrl = "vendeur.php?onglet=1&id="+ui.item.id;
		window.location.href = targetUrl;//envoi vers url
        },
	open: function(event, ui) {
		$('.liste-vendeurs ul').css('display', 'none'); //cache le contenu
		$('ul.ui-autocomplete').removeAttr('style').hide().appendTo('.liste-vendeurs');
		var id_current=$(this).attr("id");
		//force affichage des ul
		if(id_current=='nom_enseigne')
			$("#ui-id-1").css('display', 'block');
		if(id_current=='nom_exploitant')
			$("#ui-id-2").css('display', 'block');				
		if(id_current=='adresse')
			$("#ui-id-3").css('display', 'block');
		if(id_current=='cp')
			$("#ui-id-4").css('display', 'block');				
		if(id_current=='ville')
			$("#ui-id-5").css('display', 'block');					
		if(id_current=='telephone')
			$("#ui-id-6").css('display', 'block');	
	},
	close: function(event, ui) {
		$('.ui-autocomplete').css('display', 'block');
	}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	return $( "<li>" )
	.append( "<a>" + item.nom_enseigne + " - " + item.adresse + " - " + item.ville + "</a>" )
	.appendTo( ul );
};

et mon code HTML :

Code html : 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
24
25
26
<tr>
	<td class="texte">Enseigne</td>
	<td><input name="nom_enseigne" type="text" class="champs_texte recherche-vendeur" id="nom_enseigne" value="<?php echo stripslashes($row["nom_enseigne"]); ?>" size="20">
		Sans enseigne <input name="sans_enseigne" type="checkbox" id="sans_enseigne" value="1" <?php if($row["sans_enseigne"]==1){ echo ' checked=checked'; } ?>></td>
	<td class="texte" colspan="2" rowspan="8" valign="top"><div class="liste-vendeurs"></div></td>						
</tr>
<tr>
	<td class="texte">Nom exploitant</td>
	<td><input name="nom_exploitant" type="text" class="champs_description recherche-vendeur" id="nom_exploitant" value="<?php echo stripslashes($row["nom_exploitant"]); ?>" size="20"></td>
</tr>
<tr>
	<td class="texte">Activité</td>
	<td><button id="btn-liste-activites">Liste d'activités</button></td>
</tr>
<tr>
	<td class="texte">Adresse</td>
	<td><input name="adresse" type="text" class="champs_description recherche-vendeur" id="adresse" value="<?php echo stripslashes($row["adresse"]); ?>" size="20"></td>
</tr>	
<tr>
	<td class="texte">CP</td>
	<td><input name="cp" type="number" class="champs_description recherche-vendeur" id="cp" value="<?php echo stripslashes($row["cp"]); ?>" size="20" maxlength="5"></td>
</tr>
<tr>
	<td class="texte">Ville</td>
	<td><input name="ville" type="text" class="champs_description recherche-vendeur" id="ville" value="<?php echo stripslashes($row["ville"]); ?>" size="20"></td>
</tr>

Je souhaite ajouter un bouton pour lancer la recherche au click :


Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<button id="btn_autocomplete_vendeur" class="bouton-gris">Actualiser</button>

J'ai essayé plusieurs méthodes trouvées sur Google, aucune ne fonctionne, j'ai le formulaire qui est posté à la place.


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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$('#btn_autocomplete_vendeur')
	.button()
	.click( {
		$(".liste-vendeurs").autocomplete({
		 source: function(request, response) {
			var nom_enseigne=$('#nom_enseigne').val();
			var nom_exploitant=$('#nom_exploitant').val();
			var adresse=$('#adresse').val();
			var cp=$('#cp').val();
			var ville=$('#ville').val();
			var telephone=$('#telephone').val();
 
			if($('#sans_enseigne').is(':checked'))
			{
			var sans_enseigne=1;
			} else
			{
			var sans_enseigne=0;
			}
 
			$.getJSON("action_recherche.php", { term: request.term, nom_enseigne:nom_enseigne, sans_enseigne:sans_enseigne, nom_exploitant:nom_exploitant, adresse:adresse, cp:cp, ville:ville, telephone:telephone, cas:'1'}, 
					  response);
		  },
                minLength: 0,
                select: function(event, ui) {
                $('#nom_enseigne').val(ui.item.nom_enseigne);
				var targetUrl = "vendeur.php?onglet=1&id="+ui.item.id;
				window.location.href = targetUrl;//envoi vers url
                },
				open: function(event, ui) {
				$('.liste-vendeurs ul').css('display', 'none'); //cache le contenu
				$('ul.ui-autocomplete').removeAttr('style').hide().appendTo('.liste-vendeurs');
				var id_current=$(this).attr("id");
 
				//force affichage des ul
				if(id_current=='nom_enseigne')
				$("#ui-id-1").css('display', 'block');
				if(id_current=='nom_exploitant')
				$("#ui-id-2").css('display', 'block');				
				if(id_current=='adresse')
				$("#ui-id-3").css('display', 'block');
				if(id_current=='cp')
				$("#ui-id-4").css('display', 'block');				
				if(id_current=='ville')
				$("#ui-id-5").css('display', 'block');					
				if(id_current=='telephone')
				$("#ui-id-6").css('display', 'block');	
 
				},
				close: function(event, ui) {
					$('.ui-autocomplete').css('display', 'block');
				}
		})
	.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	return $( "<li>" )
	.append( "<a>" + item.nom_enseigne + " - " + item.adresse + " - " + item.ville + "</a>" )
	.appendTo( ul );
	};
 
    });
Merci de votre aide.