Discussion :

[boubil]

Bonjour

J'ai mis en place un autocomplete pour remplir la ville quand j'entre une code postal et vice-versa

Cela marche très bien.

Mais j'aimerai que lorsqu'il y a un seul résultat, la donnée soit selectionnée automatiquement et que le ville se renseigne quand l'utilisateur fait tab plutôt que d'avoir à cliquer.
En effet j'ai plus d'un millier de saisies à faire et ca irait bien plus vite.

J'ai pas mal cherché sur le web mais pas trouvé grand chose.
J'ai essayé sans succès les options
selectFirst: true,
selectOnly: true,


Voici le code que j'utilise

Mon formulaire

Code html :

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

1
2
3
4
5
6
7
8
<div class="ctrlHolder">
<label class="required" for="cp">Code postal : *</label>
<input id="cp" class="ui-autocomplete-input" type="text" value="" name="cp" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div class="ctrlHolder">
<label class="required" for="ville">Ville : *</label>
<input id="ville" class="ui-autocomplete-input" type="text" size="45" value="" name="ville" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>

et mon javascript/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
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
<script>
 
$.ajaxSetup({
    beforeSend: function (xmlHttpRequest) {
 
//Used by the server to determine an async request
        xmlHttpRequest.setRequestHeader('X-Requested-With', 'jQuery');
 
 
    }
 
});
 
 
 
var cache = {};
$(function ()
{
$("#cp, #ville").autocomplete({
	selectFirst: true,
    selectOnly: true,
source: function (request, response)
{
//Si la réponse est dans le cache
if (('FR' + '-' + request.term) in cache)
{
	response($.map(cache['FR' + '-' + request.term], function (item)
	{
		return {
			label: item.CodePostal + ", " + item.Ville,
			value: function ()
			{
				if ($(this).attr('id') == 'cp')
				{
				$('#ville').val(item.Ville);
					return item.CodePostal;
				}
				else
				{
					$('#cp').val(item.CodePostal);
					return item.Ville;
				}
			}
		}
	}));
}
//Sinon -> Requete Ajax
else
{
var objData = {};
if ($(this.element).attr('id') == 'cp')
{
	objData = { codepostal: request.term, pays: 'FR', maxRows: 10 };
}
else
{
	objData = { ville: request.term, pays: 'FR', maxRows: 10 };
}
$.ajax({
url: "/autocomplete/rechercheville",
dataType: "json",
data: objData,
type: 'POST',
success: function (data)
{
//Ajout de reponse dans le cache
	cache[('FR' + '-' + request.term)] = data;
	response($.map(data, function (item)
{
return {
	label: item.CodePostal + ", " + item.Ville,
	value: function ()
{
if ($(this).attr('id') == 'cp')
{
	$('#ville').val(item.Ville);
	return item.CodePostal;
}
else
{
$('#cp').val(item.CodePostal);
return item.Ville;
}
}
}
}));
}
});
}
},
minLength: 5,
delay: 1
});
});
 
 
</script>

Merci d'avance

[danielhagnoul]

J'ai essayé sans succès les options
selectFirst: true,
selectOnly: true,

Ces options n'existent pas ! Voir : http://api.jqueryui.com/autocomplete/

[boubil]

Une proposition alors ?

[NoSmoking]

Bonjour,

Une proposition alors ?

lire attentivement la documentation, tu verras qu'il existe l'Event response .

Il te suffit de récupérer combien de réponses sont disponibles, si il y en a qu'une tu modifies le champ et tu mets le focus sur le suivant.

Code :

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

1
2
3
4
5
6
 response: function( event, ui ) {
   if( ui.content.length ==1){
     $( "#autocomplete" ).val(ui.content[0].value);
     $( "#suivant").focus();
   }
 }