Discussion :

[Kevin0363]

Bonjour à tous,

Je vous explique mon problème.
J'ai créé une map avec l'api google map qui affiche toutes les sociétés d'un fichier xml. Sur cette map j'ai un champ input qui permet de rechercher n'importe quelle ville en France. En rentrant le code postal ou les premières lettres de la ville, une liste de villes nous est proposé. J'aimerais que par défaut, la première ville de cette liste soit sélectionnée automatiquement, c'est à dire que lorsque que l'on tape les premiers caractères d'une villes et que l'on tape sur Entrée, la première soit sélectionnée. J'ai parcouru plusieurs forum qui me recommendait d'utiliser autoFocus : true, mais cela ne fonctionne pas. Mon code sera sans doute plus parlant.

auto-completion-villes.js

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
function autoCompleteVille(idInput,callback){	
	var tabResult = Array();
	jQuery("#"+idInput).autocomplete(
	{
		minLength: 3,
		source: function( request, response ) {
			jQuery.ajax({
				url: "/AUTO-COMPL-VILLE/auto-completion-resultats.php",
				dataType: "json",
				data: {
					cp: jQuery("#"+idInput).val(),
					callback: ''
				},
				success: function( data ) {
					response( jQuery.map( data, function( item ) {
						tabResult.push(Array(item.value));
						// alert(item.intitulepresta);
						return {
							// id: item.id_cp,
							label: item.label,
							value: item.value,
							latVille: item.latVille,
							lngVille: item.lngVille,
							presta: item.intitulepresta,
							mailpresta: item.mailpresta,
							latitude :item.latitude,
							longitude : item.longitude
						}
					}));
				}
			});
		},
		autofocus : true,
		select: function (event, ui) {
			// this.value = ui.item.value;		
			info = "";
			eval(callback+"('"+ui.item.latitude+"','"+ui.item.longitude+"','"+ui.item.latVille+"','"+ui.item.lngVille+"','"+info+"')");
		}
	});
}

et mon code php :
auto-completion-villes.php

Code html :

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

1
2
3
4
5
<div class="ui-widget">
	<label>Code Postal</label>
	<input type="text" style="text-transform: uppercase;" id="<?php echo $id_input; ?>" name="<?php echo $id_input; ?>" class="ville_autocomplete" onFocus="autoCompleteVille('<?php echo $id_input; ?>','<?php echo $callback; ?>');" />
	<input type="button" value="Me géolocaliser" onclick="geolocationOwn()"/>
</div>

et voici les jquery que j'appelle

Code html :

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

1
2
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="JS/jquery-1.10.1.min.js"></script>

Merci d'avance pour vos réponses !

Kévin

[danielhagnoul]

Bonjour

La documentation ne parle que de http://api.jqueryui.com/autocomplete/#option-autoFocus

Votre version d'UI est obsolète, on en est à 1.10.3 !

[Kevin0363]

Merci !!!! Bizarrement ça fonctionne tout de suite mieux ! Merci encore !