Autocomplete dans un formulaire

Version imprimable

Bonsoir,

Je me suis lancé dans la création d'un site web et j'en arrive à la fin. Cependant, je me retrouves bloqué face à un petit détail néanmoins essentiel :

Dans un formulaire de demande de devis, je demande notamment l'adresse du client, je voudrais ainsi obtenir une liste déroulante à la manière de google. Après plusieurs recherches j'ai trouvé ce qu'il me fallait, j'ai réalisé quelques essais sur un fichier html "simple", pas de problème.

Cependant, lorsque je décide de l'intégrer à mon site, il ne réagit plus. En fait, tout se passe bien si je le place en début de mon index.php mais si je le mets dans ma balise <form>, cela ne fonctionne plus...

Voici le code html :

Code:

<input type="text" name="adresse" id="adresse"/>

et le JS :
Code:

1 2 3 4 5 6 7 8 9 10 11 <script> var autocomplete; function initAutocomplete() { autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */(document.getElementById('adresse')), {types: ['geocode']}); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=123456789&libraries=places&callback=initAutocomplete"async defer></script>
Je vous remercie d'avance pour vos réponses.

07/09/2018, 18h42
NoSmoking

Bonjour,
à priori il n'y a aucune raison que cela ne fonctionne pas.
Pourrais-tu nous mettre un code exemple qui reproduit ton soucis ?

Bonsoir, merci pour cette première réponse.

Je viens de simplifier au mieux mon code afin que vous puissiez vous rendre compte du problème. Il faut donc cliquer sur "Demande de devis" pour afficher le formulaire qui est masqué de base. On se retrouve alors avec les deux champs visible, le premier en dehors du formulaire fonctionne et le deuxième qui est dans le formulaire ne fonctionne pas. Je vous laisse regarder :

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
<!DOCTYPE HTML>
<html>
 
 
<body>
 
    <!--Mainmenu-area-->
            <nav>
                <ul>
                    <li><a onclick="toggle_div(this,'DemandeDevis');" style=color:black;>Demande de DEVIS</a></li>
                </ul>
            </nav>
 
 
 <!-- Le JS qui ne nous interesse pas ici... -->
 <script type="text/javascript">
 function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
   var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
   if(div.style.display=="none") { // Si le div est masqué...
     div.style.display = "block"; // ... on l'affiche...
   } else { // S'il est visible...
     div.style.display = "none"; // ... on le masque...
   }
 }
</script>
 
 
 <!-- Le champs de recherche qui fonctionne -->
        <input id="pac-input" type="text" placeholder="Enter a location">
 
    <script>
      function initMap() {
        var input = document.getElementById('pac-input');
        var autocomplete = new google.maps.places.Autocomplete(input);}
    </script>
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsPVRDxbM58DrEUpuPLvCiyGBt6u2G4EA&libraries=places&callback=initMap" async defer></script>
 
 
            <div id="DemandeDevis" style="display:none;">
                <form>
                    <fieldset>
                        <!-- Le champs de recherche qui ne fonctionne pas -->
                        <input id="pac-input" type="text" placeholder="Enter a location">
                            <script>
                                function initMap() {
                                    var input = document.getElementById('pac-input');
                                    var autocomplete = new google.maps.places.Autocomplete(input);}
                            </script>
                            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsPVRDxbM58DrEUpuPLvCiyGBt6u2G4EA&libraries=places&callback=initMap" async defer></script>
                    </fieldset>
                </form>
            </div>
 
    <!--Mainmenu-area/-->
 
</body>
 
</html>

07/09/2018, 22h54
ProgElecT

Salut
Ligne 29 et 44, un id ce doit d'être unique.

Salut (Re)

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
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<script>
                        function initMap() {
                                var input = document.getElementById('pac-input');
                                var autocomplete = new google.maps.places.Autocomplete(input);
                                var input2 = document.getElementById('pac-input2');
                                var autocomplete2 = new google.maps.places.Autocomplete(input2);
                        }
                                <!-- Le JS qui ne nous interesse pas ici... -->
                        function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
                                var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
                                if(div.style.display=="none") { // Si le div est masqué...
                                        div.style.display = "block"; // ... on l'affiche...
                                        } else { // S'il est visible...
                                        div.style.display = "none"; // ... on le masque...
                                }
                        }
                </script>
	</head>
 
	<body>
    <!--Mainmenu-area-->
		<nav>
			<ul>
				<li><a onclick="toggle_div(this,'DemandeDevis');" style=color:black;>Demande de DEVIS</a></li>
			</ul>
		</nav>
		<!-- Le champs de recherche qui fonctionne -->
		<input id="pac-input" type="text" placeholder="Enter a location">
 
		<div id="DemandeDevis" style="display:none;">
			<form>
				<fieldset>
					<!-- Le champs de recherche qui ne fonctionne pas -->
					<input id="pac-input2" type="text" placeholder="Enter a location">
				</fieldset>
			</form>
		</div>
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsPVRDxbM58DrEUpuPLvCiyGBt6u2G4EA&libraries=places&callback=initMap" async defer></script>
	</body>
 
</html>

Une variante, sans utilisation de des ids

Code:

1
2
3
4
5
			function initMap() {
				var input = document.querySelectorAll('input[placeholder]'); // sélection des inputs ayant pour attribut placeholder
				var autocomplete = new google.maps.places.Autocomplete(input[0]);
				autocomplete.push(new google.maps.places.Autocomplete(input[1]));
			}

08/09/2018, 22h49
triistaan

Merci pour votre réponse, en effet le problème venait de là pour ce code "réduit" même si en rélaité je n'utilise pas les deux champs donc je n'étais pas confronter à ce problème au final.

Malheureusement, j'ai toujours le même problème une fois remis sur mon site. Après de nombreux essais, j'ai découvert qu'en enlevant mon css c'est à dire en enlevant cette ligne dans mon code :

Code:

<link rel="stylesheet" href="style.css">

Alors à ce moment le champs recherche fonctionne. Si je remets le CSS, cela ne fonctionne plus. Étrange mais il doit y avoir quelque chose qui bloque, avez vous des idées ?
09/09/2018, 09h59
ProgElecT

Salut

Pour pouvoir t'aider, il faut nous mettre le code de ton fichier style.css, ce doit être lui qui a une ligne qui contrarie le fonctionnement normal de ton autocomplete, pense aussi à nous remettre la ligne HTML/PHP correspondant à la déclaration de l'input champs de recherche.
09/09/2018, 21h00
triistaan

J'ai poussé un peu plus loin mes recherches et j'ai trouvé la source du problème mais malheureusement pas encore la solution.

J'ai remarqué qu'en enlevant le background-color du formulaire, je voyais l'autocomplete. J'ai en fait réalisé que, tout bêtement, l'autocomplete se faisait bel et bien mais est placé en arrière plan et donc je ne le voyais pas...

Le problème étant que je ne trouve pas comment le faire passer au premier plan, j'ai essayer avec z-index mais pas mieux. Avez vous d'autres pistes ?
10/09/2018, 10h00
NoSmoking

Citation:

Envoyé par triistaan

Le problème étant que je ne trouve pas comment le faire passer au premier plan, j'ai essayer avec z-index mais pas mieux. Avez vous d'autres pistes ?

La « réponse » est

Citation:

Envoyé par ProgElecT

Pour pouvoir t'aider, il faut nous mettre le code de ton fichier style.css, (...)
10/09/2018, 21h43
triistaan

Bonsoir,

Je vous épargne les 1000 lignes du code css... Par déduction j'ai trouvé le div fautif dans mon cas, ce dernier avait un z-index de 99999 d'où le problème. Après modification de cela, tout fonctionne parfaitement.

Merci beaucoup pour votre aide.