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 : 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 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);Je ne sais pas du tout comment procéder!
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Aidez-moi SVP
Merci
Partager