Discussion :

[lapaupiette]

Bonjour,

J'utilise Jquery UI Autocomplete dans un formulaire type moteur de recherche avec plusierus champs dont une recherche par commune, c'est ce champ qui est en autocomplétion.

Voici le scénario :

1 - Arrivée sur le formulaire vierge, on sélectionne une commune (champ 'commune' en autocomplétion)

2 - Le champ 'commune' prend la valeur 'textuelle' - exemple : Paris (75001) - et un champ caché 'commune_id' reçoit comme valeur l'id (celui de la table dans la base de données) de la commune, par exemple : 1234.

3 - Le formulaire est posté, les valeurs sont réaffichées.

4 - Si on veut modifier la commune, je souhaiterais que la commune saisie précédemment soit alors effacée, ainsi que le champ caché commune_id bien sûr.

A noter que je passe le département si celui-ci a été sélectionné, cela permet bien entendu de ne rechercher (dans mon fichier json/autocomplete.php) que parmi les communes du département concerné.

En fait je sais comment effacer (commune.val() = "") mais je ne trouve pas quel déclencheur mettre parmi les options d'événements d'UI Autocomplete (j'ai regardé la doc donc). J'ai tenté plusieurs choses sans résultats et si je mets un évènement sur le champ en dehors de la fonction autocomplete alors l'autocomplétion ne fonctionne plus du tout (par exemple avec $("#commune).onkeyup).

Attention, je ne veux pas du return:false dans l'évènement select qui fait que la valeur sélectionnée ne se met pas dans le champ de saisie.

Voici le code :

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
 
$("#commune").autocomplete({
		minLength: 3,
		source: function (request, response) {
			$.ajax({
				type: "GET",                        
				url: "../json/autocomplete.php",
				contentType: "application/json; charset=utf-8",
				dataType: "json",                                                    
				data: { term: $("#commune").val(),
					    dep: $("#departement").val()
				},			         
				success: function(data) {					
				     if (data=="cas1") {
						alert("Une erreur est survenue");
					    return false;
                     }
 
                     if (data=="cas2") {
 						alert("Aucun résultat trouvé pour la commune saisie");
 					    return false;
                     }
 
					response($.map(data, function(item) {
						return {
							id: item.com_num,
							value: item.com_v_nom+" ("+item.com_v_cp+")"					
						}
					})) 
				},				
				error: function(jqXHR, textStatus, errorThrown) {
					alert("Une erreur est survenue");
				}				
			}); // -- $.ajax
		}, // -- source
 
		select: function(event, ui) {
			$("#commune_id").val(ui.item.id);	    			
		}	   
	});	
}

Une idée ? merci d'avance.

[danielhagnoul]

Bonjour

Code :

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

1
2
3
4
$( "#commune" ).on( "focus", function(){
	$( this ).val( "" );
	$( "#commune_id" ).val( "" );
});

[lapaupiette]

Ca fonctionne nickel, j'étais justement en train de chercher de ce côté là, merci beaucoup.