Comment faire fonctionner mes flèches haut et bas dans ma liste autocomplete ?
Bonjour,
J'ai 3 champs : Code postal, ville et pays. Le champ 'ville' est une liste auto-complete, le problème c'est que les flèches du clavier ne permettent pas de sélectionner un élément dans la liste.
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
|
var postalcodes;
function getLocation(jData) {
if (jData == null) {
return;
}
postalcodes = jData.postalcodes;
if (postalcodes.length > 1) {
document.getElementById('suggestBoxElement').style.visibility = 'visible';
var suggestBoxHTML = '';
for (i=0;i< jData.postalcodes.length;i++) {
suggestBoxHTML += "<li class='select' id=pcId" + i + " onmousedown='suggestBoxMouseDown(" + i +")' onmouseover='suggestBoxMouseOver(" + i +")' onmouseout='suggestBoxMouseOut(" + i +")'> " + postalcodes[i].placeName +'</li>' ; //Ajout possible du code pays ainsi que le code postal avec : + postalcodes[i].countryCode + ' ' + postalcodes[i].postalcode + ' '
}
document.getElementById('suggestBoxElement').innerHTML = suggestBoxHTML;
} else {
if (postalcodes.length == 1) {
var placeInput = document.getElementById("placeInput");
placeInput.value = postalcodes[0].placeName;
}
closeSuggestBox();
}
}
function closeSuggestBox() {
document.getElementById('suggestBoxElement').innerHTML = '';
document.getElementById('suggestBoxElement').style.visibility = 'hidden';
}
function suggestBoxMouseOut(obj) {
document.getElementById('pcId'+ obj).className = 'suggestions';
}
function suggestBoxMouseDown(obj) {
closeSuggestBox();
var placeInput = document.getElementById("placeInput");
placeInput.value = postalcodes[obj].placeName;
}
function suggestBoxMouseOver(obj) {
document.getElementById('pcId'+ obj).className = 'suggestionMouseOver';
}
function postalCodeLookup() {
var country = document.getElementById("countrySelect").value;
if (geonamesPostalCodeCountries.toString().search(country) == -1) {
return;
}
document.getElementById('suggestBoxElement').style.visibility = 'visible';
document.getElementById('suggestBoxElement').innerHTML = '<small><i>Recherche ...</i></small>';
var postalcode = document.getElementById("postalcodeInput").value;
request = 'http://api.geonames.org/postalCodeLookupJSON?postalcode=' + postalcode + '&country=' + country + '&username=croixrougecrf&callback=getLocation';
aObj = new JSONscriptRequest(request);
aObj.buildScriptTag();
aObj.addScriptTag();
}
function setDefaultCountry() {
var countrySelect = document.getElementById("countrySelect");
for (i=0;i< countrySelect.length;i++) {
if (countrySelect[i].value == geonamesUserIpCountryCode) {
countrySelect.selectedIndex = i;
}
}
}//alert(geonamesUserIpCountryCode); |
Code:
1
2
3
4
5
6
7
8
9
| <!-- Ville -->
<section class="col col-4">
<label class="input">
<input id="placeInput" name="place" size="30" onblur="closeSuggestBox();" type="text" placeholder="Ville" autocomplete="off">
</label>
<label class="select">
<ul class="select" style="visibility: hidden;" id="suggestBoxElement"></ul>
</label>
</section> |
Je ne sais pas du tout comment procéder!
Aidez-moi SVP
Merci
