Recherche autocomplete depuis click button

**devlm** · 14/05/2013, 14h16

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.

**danielhagnoul** · 14/05/2013, 23h44

Bonsoir

Exemple :

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

**devlm** · 15/05/2013, 09h28

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

Code :

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

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.

**devlm** · 15/05/2013, 10h45

J'ai essayé ceci :

Code :

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

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.

**danielhagnoul** · 15/05/2013, 20h29

Bonsoir

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.

**devlm** · 17/05/2013, 11h04

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 :

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

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

Merci.

Recherche autocomplete depuis click button

jQuery

Vue hybride

Discussions similaires

Partager

Partager