Discussion :

[ludovic44]

Bonjour,

Je commence à avoir un autocomplete plutôt sympa, mais j'aimerai maintenant personnaliser les éléments de mon menu, à terme y ajouter une petite image. Après plusieurs essais, recherche, je n'arrive pas à utiliser "_renderItem = function ( ul, item )".

Voici la dernière version de mon code :

Code :

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

1
2
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

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
$(function(){
	$('#fos_user_registration_form_ville').autocomplete({
		source : Routing.generate('l2_geo_town_ajax', {}),
		minLength : 3,
		appendTo : "#ville",
		response : function(event, ui){
				var lt;
				var lg;
 
				lt = parseFloat(ui.content[0].lt);
				lg = parseFloat(ui.content[0].lg);
 
 
				console.log(lt);
				console.log(lg);
 
				var map = new GMaps({
				el: '#map',
				lat: lt,
				lng: lg
			});
				console.log(JSON.stringify(ui));
 
				console.log(JSON.stringify(lt));
				console.log(JSON.stringify(lg));
 
 
				for(var i = 0; i < ui.content.length; i++){
					map.addMarker({
						lat : ui.content[i].lt,
						lng : ui.content[i].lg,
						label : (i+1) + "",
						animation: google.maps.Animation.DROP,
						});
				}
				console.log(ui.content.length);
				map.fitZoom();
 
 
			},
 
 
 
		select : function(event, ui){
			$('#fos_user_registration_form_idville').val(ui.item.id);
		},
 
 
	});
 
.autocomplete("instance")._renderItem = function ( ul, item ) {
			alert();
			console.log(item.id);
			return $( "<li>" )
				.append( "<div>" + item.value + " " + item.id + "</div>" )
				.appendTo( ul );
			};
});

ce dernier code est directement inspiré de l'exemple de la doc officiel https://jqueryui.com/autocomplete/#custom-data

avec ce code j'ai l'erreur suivante :

SyntaxError: expected expression, got '.'

J'aimerai avoir de nouvelles pistes de recherche et des informations sur le fonctionnement de _renderItem car je n'ai pas réussi à trouver grand chose là dessus.

Merci.

[headmax]

Tu n'utilise pas les data json provenant de $( "#project" ) donc je doute que ton code marche, car celui ci devrait récupérer les données de googlemap filtrer selon les mot clefs taper et formater avec les bons attribute que se json attends. Donc il y a encore du boulot a faire.

[ludovic44]

Pas tant de boulot que ça, il suffisait juste d'ajouter l'id de mon input devant ".autocomplete("instance")._renderItem"

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
$(function(){
	$('#fos_user_registration_form_ville').autocomplete({
		source : Routing.generate('l2_geo_town_ajax', {}),
		minLength : 3,
		appendTo : "#ville",
		response : function(event, ui){
				var lt;
				var lg;
 
				lt = parseFloat(ui.content[0].lt);
				lg = parseFloat(ui.content[0].lg);
 
 
				console.log(lt);
				console.log(lg);
 
				var map = new GMaps({
				el: '#map',
				lat: lt,
				lng: lg
			});
				console.log(JSON.stringify(ui));
 
				console.log(JSON.stringify(lt));
				console.log(JSON.stringify(lg));
 
 
				for(var i = 0; i < ui.content.length; i++){
					map.addMarker({
						lat : ui.content[i].lt,
						lng : ui.content[i].lg,
						label : (i+1) + "",
						animation: google.maps.Animation.DROP,
						});
				}
				console.log(ui.content.length);
				map.fitZoom();
 
 
			},
 
 
 
		select : function(event, ui){
			$('#fos_user_registration_form_idville').val(ui.item.id);
		},
 
 
	});
 
$('#fos_user_registration_form_ville').autocomplete("instance")._renderItem = function ( ul, item ) {
			return $( "<li>" )
				.append( "<div><img src=" + item.img + " /> " + item.value + "</div>" )
				.appendTo( ul );
			};
});

J'utilise googleMap uniquement pour afficher une carte avec marqueurs. J'ai ma propre BDD avec les données géographiques car j'en ai besoin pour la suite de mon appli.

Merci