Recherche autocomplete depuis click button

Version imprimable

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:

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:

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:

<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:

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.

Bonsoir

Exemple :

Code:

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
var availableTags = [
	"ActionScript",
     "AppleScript",
     "Asp",
     "BASIC",
     "C",
     "C++",
     "Clojure",
     "COBOL",
     "ColdFusion",
     "Erlang",
     "Fortran",
     "Groovy",
     "Haskell",
     "Java",
     "JavaScript",
     "Lisp",
     "Perl",
     "PHP",
     "Python",
     "Ruby",
     "Scala",
     "Scheme"
];
 
$( "#tags" ).autocomplete({
	"source" : availableTags
});
 
$( "#btnChercher" ).on( "click", function(){
	$( "#tags" )
		.trigger( "focus" )
		.val( "j" )
		.autocomplete( "search", "j" );
});
 
				});
 
				$( window ).load( function(){
 
				});
 
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<button id="btnChercher">Chercher</button>
 
		<div class="ui-widget">
			<label for="tags">Tags: </label>
			<input id="tags" />
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-05-14T23:41:38.343+02:00" pubdate>2013-05-14T23:41:38.343+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

Bonjour j'ai essayé ceci, mais rien ne se passe.
Code:

1 2 3 4 5 6 $( "#btn-recherche-vendeurs" ).button().on( "click", function( event ) { event.preventDefault(); $( ".recherche-vendeur" ) .trigger( "focus" ) .autocomplete( "search",""); });
Si je ne mets pas event.preventDefault();, il me post le formulaire, ce qui ne me convient pas.

Merci encore.

15/05/2013, 10h45
devlm
J'ai essayé ceci :
Code:

1 2 3 4 5 6 $("#btn-recherche-vendeurs") .button() .click(function( event ) { event.preventDefault(); $( "#nom_enseigne" ).trigger('keydown'); });
Après avoir modifié le nom de mon champ autocomplete #nom_enseigne, par contre, il ne me fait l'autocomplete que la première fois, si je clique de nouveau sur le bouton, aucune action ne se passe.

Je souhaiterais relancer l'autocompletion à chaque fois que l'on clique sur le bouton.
15/05/2013, 20h29
danielhagnoul

Bonsoir

Citation:

Bonjour j'ai essayé ceci, mais rien ne se passe

: l'input n'est pas initialisé et il n'y a rien dans le paramètre "value" de l'événement "search" : autocomplete( "search","").

L'essai n° 2 n'a strictement rien à voir avec mon exemple.

Mon exemple fonctionne, pour l'adaptation à votre code (que je ne comprends pas, un UI Autocomplete est lié à un seul input et recherche un seul type d'information) vous êtes le seul à disposer de tous les éléments.

J'ai bien utilisé ceci, cela ne marchait pas avec ma class .recherche-vendeur mais c'est fonctionnel avec un div sur l'input.
Code:

1 2 3 4 5 6 $( "#btn-recherche-vendeurs" ).button().on( "click", function( event ) { event.preventDefault(); $( "#nom_enseigne" ) .trigger( "focus" ) .autocomplete( "search",""); });
Merci.