Demande d'aide pour l'Autocompletion
Bonjour,
Je cherche à implémenter l'autocompletion dans un formulaire avec deux champs de saisie texte. Pour cela, j'ai pris exemple sur un code dans la documentation Google en faisant les étapes suivantes :
- dans ma page html j'ai déclaré l'appel de la librairie "places" par :
Code:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
pour les champs de saisie suivant (extrait) :
Code:
1
2
3
|
Départ:<input type="text" id="from" value="Adresse de départ"/>
Arrivée:<input type="text" id="to" value="Adresse d'arrivée"/> |
ainsi que le script à exécuter pour l'autocomplétion :
Code:
<script type="text/javascript" src="js/autocomp.js"></script>
- et la fonction d'autocompletion est la suivante :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| function initAutocomplete()
{
options = {componentRestrictions: {country: 'fr'}};
inputFrom = document.getElementById('from');
autocompleteFrom = new google.maps.places.Autocomplete(inputFrom,
options);
inputTo = document.getElementById('to');
autocompleteTo = new google.maps.places.Autocomplete(inputTo,
options);
} |
Les codes ont été générés sur la base d'un exemple de Google qui fonctionne bien.
A l'exécution de ma page, on a l'erreur suivante sous Firebug :
Citation:
TypeError: google.maps.places is undefined
autocompleteFrom = new google.maps.places.Autocomplete(inputFrom,
options)
Je ne comprends pas trop l'erreur obtenue alors que la librairie "places" a bien été déclarée, donc "google.maps.places" doit être connu.
Pouvez-vous m'aider à résoudre ce problème afin d'implémenter l'autocompletion correctement ?
Ou me proposer un exemple de code simple pour l'implémentation ?
Je vous remercie par avance pour vos réponses.
ejazz75
Demande d'aide pour l'Autocompletion
Bonjour patcino,
Je te remercie pour ton aide.
Ton exemple de code fonctionne bien, mais quand j'essaie de l'intégrer dans mon projet j'obtiens le même type d'erreur :
Code:
1
2
| TypeError: google.maps.places is undefined
autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options) |
Ayant déjà un script main.js pour l'init de l'application, j'ai mis la fonction initAutocompletion() dans le main.js pour que l'init de la completion se fasse par le main.js et non plus par le onload du <body>.
J'obtiens la même erreur.
J'ai beau modifié le code de la fonction initAutocomplete() ou le placer dans un script différent, rien ne change, toujours la même erreur.
Ce qui dommage, c'est que le code fonctionne bien sur une page html simple, et que je n'arrive pas au même résultat.
Si tu as une explication, je suis preneur et encore merci pour ton aide.
ejazz75
Demande d'aide pour l'Autocompletion
Bonjour Bovino,
Merci pour ta remarque, mais j'ai déjà fait attention à cela.
J'ai l'impression que la librairie "Places" ne se charge pas malgré sa déclaration.
As-tu une idée ?
ejazz75
Demande d'aide pour l'Autocompletion
Salut patcino,
J'ai suivi tes recommandations contrairement à ce que j'avais essayé après avoir reçu ta première réponse.
J'ai créé un script pour initAutocomplete() que j'appelle dans le onload du <body> alors que je pensais le faire dans le main.js, mais en passant par le main.js cela générait beaucoup plus d'erreurs.
Au final, l'implémentation de l'autocomplétion est simple, mais curieusement dans mon projet, la librairie "Places" ne se charge pas.
Etant donné que je travaille sur un projet professionnel qui ne m'appartient pas, ci-dessous un extrait du html et du script :
- code index.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <html>
<head>
<!-- appel css, librairies, etc.. -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false&libraries=places"></script>
<!-- script du projet, etc.. -->
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/autocomp2.js"></script>
<!-- script du projet, etc.. -->
</head>
<body onload="initAutocomplete();">
<!-- début et fin partie header -->
<!--début partie content -->
<!-- début partie formulaire -->
<b>Départ:</b>
<input type="text" id="from" value="Adresse de départ"/>
<b>Arrivée:</b>
<input type="text" id="to" value="Adresse d'arrivée"/>
<!-- partie submit, etc.. -->
<!-- fin partie formulaire -->
<!-- début et fin partie footer -->
</body>
</html> |
- code autocomp2.js
Code:
1
2
3
4
5
6
7
8
9
10
| function initAutocomplete(){
var options = {componentRestrictions: {country: 'fr'}};
var inputFrom = document.getElementById('from');
var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom,
options);
var inputTo = document.getElementById('to');
var autocompleteTo = new google.maps.places.Autocomplete(inputTo,
options);
} |
En espérant que cela peut aider à comprendre mon problème d'intégration de l'autocomplétion.
Par avance, merci pour ta réponse.
ejazz75
Demande d'aide pour l'Autocompletion
Bonjour NoSmoking,
Il n'y a pas de saut de ligne dans mon code.
C'est juste une erreur au moment du copier/coller dans l'éditeur.
ejazz75
