Autocomplete selectionner automatiquement quand 1 seul resultat
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:
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:
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
