[HTML - JavaScript]

Lusheez · le 30 janvier 2014

Bonjour !

J'aimerais bien pouvoir faire une boite d'autocomplétion de ville, et ce uniquement pour la Belgique.

J'ai essayé de me baser sur http://www.geonames.org/export/ajax-postalcode-autocomplete.html mais du coup, le code que je récupère ne fait rien lorsque j'entre le code postal. Je suis complètement débutant en HTML donc je ne sais pas si ce que je fais est bon ou pas. J'ai essayé de juste "copier-coller" le code HTML que donne geonames... Donc voici mon code:

<html>
<head>
<title>Ma ville</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="http://api.geonames.org/export/geonamesData.js?username=demo"></script>
<script type="text/javascript" src="/export/jsr_class.js"></script>

<style>
#suggestBoxElement {border: 1px solid #8FABFF; visibility:hidden; text-align: left; white-space: nowrap; background-color: #eeeeee;}
.suggestions { font-size: 14;background-color: #eeeeee; }
.suggestionMouseOver { font-size: 14;background: #3333ff; color: white; }
</style>

<script>

// postalcodes is filled by the JSON callback and used by the mouse event handlers of the suggest box
var postalcodes;

// this function will be called by our JSON callback
// the parameter jData will contain an array with postalcode objects
function getLocation(jData) {
if (jData == null) {
// There was a problem parsing search results
return;
}

// save place array in 'postalcodes' to make it accessible from mouse event handlers
postalcodes = jData.postalcodes;

if (postalcodes.length > 1) {
// we got several places for the postalcode
// make suggest box visible
document.getElementById('suggestBoxElement').style.visibility = 'visible';
var suggestBoxHTML = '';
// iterate over places and build suggest box content
for (i=0;i< jData.postalcodes.length;i++) {
// for every postalcode record we create a html div
// each div gets an id using the array index for later retrieval
// define mouse event handlers to highlight places on mouseover
// and to select a place on click
// all events receive the postalcode array index as input parameter
suggestBoxHTML += "<div class='suggestions' id=pcId" + i + " onmousedown='suggestBoxMouseDown(" + i +")' onmouseover='suggestBoxMouseOver(" + i +")' onmouseout='suggestBoxMouseOut(" + i +")'> " + postalcodes.countryCode + ' ' + postalcodes.postalcode + ' ' + postalcodes.placeName +'</div>' ;
}
// display suggest box
document.getElementById('suggestBoxElement').innerHTML = suggestBoxHTML;
} else {
if (postalcodes.length == 1) {
// exactly one place for postalcode
// directly fill the form, no suggest box required
var placeInput = document.getElementById("placeInput");
placeInput.value = postalcodes[0].placeName;
}
closeSuggestBox();
}
}

function closeSuggestBox() {
document.getElementById('suggestBoxElement').innerHTML = '';
document.getElementById('suggestBoxElement').style.visibility = 'hidden';
}

// remove highlight on mouse out event
function suggestBoxMouseOut(obj) {
document.getElementById('pcId'+ obj).className = 'suggestions';
}

// the user has selected a place name from the suggest box
function suggestBoxMouseDown(obj) {
closeSuggestBox();
var placeInput = document.getElementById("placeInput");
placeInput.value = postalcodes[obj].placeName;
}

// function to highlight places on mouse over event
function suggestBoxMouseOver(obj) {
document.getElementById('pcId'+ obj).className = 'suggestionMouseOver';
}

// this function is called when the user leaves the postal code input field
// it call the geonames.org JSON webservice to fetch an array of places
// for the given postal code
function postalCodeLookup() {

var country = document.getElementById("countrySelect").value;

if (geonamesPostalCodeCountries.toString().search(country) == -1) {
return; // selected country not supported by geonames
}
// display loading in suggest box
document.getElementById('suggestBoxElement').style.visibility = 'visible';
document.getElementById('suggestBoxElement').innerHTML = '<small><i>loading ...</i></small>';

var postalcode = document.getElementById("postalcodeInput").value;

request = 'http://api.geonames.org/postalCodeLookupJSON?postalcode=' + postalcode + '&country=' + country + '&username=demo&callback=getLocation';

// Create a new script object
aObj = new JSONscriptRequest(request);
// Build the script tag
aObj.buildScriptTag();
// Execute (add) the script tag
aObj.addScriptTag();
}

// set the country of the user's ip (included in geonamesData.js) as selected country
// in the country select box of the address form
function setDefaultCountry() {
var countrySelect = document.getElementById("countrySelect");
for (i=0;i< countrySelect.length;i++) {
// the javascript geonamesData.js contains the countrycode
// of the userIp in the variable 'geonamesUserIpCountryCode'
if (countrySelect.value == geonamesUserIpCountryCode) {
// set the country selectionfield
countrySelect.selectedIndex = i;
}
}
}

</script>
</head>

<body onload="setDefaultCountry();">

<form name="myform">

<table>

<tbody><tr><td>Country</td><td colspan="2">
<select id="countrySelect" name="country"><option value="BE"> Belgium</option></select>

</td></tr>

<tr><td valign="top">PostalCode / Place </td><td valign="top">
<input id="postalcodeInput" name="postalcode" onblur="postalCodeLookup();" size="10" type="text">
</td><td>
<input id="placeInput" name="place" size="30" onblur="closeSuggestBox();" type="text">
<div style="visibility: hidden;" id="suggestBoxElement"></div>
</td></tr>
</tbody></table>

</form>

</body></html>

L'erreur va peut-être vous sauter aux yeux mais moi je ne saisis pas trop le pourquoi du comment ça ne marche pas quand je lance mon fichier html.

Merci d'avance de votre aide !

:)

Creating a Google Suggest Style Filter with the AutoComplete Control - See more at: http://www.codeanddesign-studio.com/2011/05/31/30-autosuggest-for-your-search-box/#sthash.gKo23Oht.dpuf

Nemasix · le 30 janvier 2014

Salut,

as tu récupéré le fichier suivant?

<script type="text/javascript" src="/export/jsr_class.js"></script>

Car si tu ne l'as pas c'est normal que ça ne marche pas. As tu bien lu le tutoriel?

PS: Pour ton code, je te conseille de l'entourer d'une balise

 sur le forum, ce qui permet d'être plus lisible

EDIT: Je viens de tester sur mon PC, en téléchargeant jsr_class.js et en mettant la bonne adresse dans le script ça marche nickel :chinois:

Lusheez · le 2 février 2014

Quand je dis que je suis un boulet...

J'ai fait ça, et ça a l'air de fonctionner un peu mieux, mais pas nickel non plus. Maintenant quand je mets un code postal, au lieu de ne rien faire il m'affiche un beau "loading" et ne trouve rien... Comment ça se fait ?

Merci beaucoup pour la réponse en tout cas :)

romjpn · le 19 février 2014

Il faut débugger, voire si la console JS ne voit pas d'erreur.

Sinon peut-être une piste avec cette méthode : http://www.jedi.be/blog/2009/04/29/geocoding-belgium-postal-codes/

Connexion

[HTML - JavaScript]

Messages recommandés

Lusheez

Lien vers le commentaire

Partager sur d’autres sites

Nemasix

Lien vers le commentaire

Partager sur d’autres sites

Lusheez

Lien vers le commentaire

Partager sur d’autres sites

romjpn

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité