Auto complétion ville - code postal

**elgringo67000** · 04/05/2020, 19h25

Bonjour à tous

Je souhaite installer un script quand on fait entrer dans un champ le code postal cela donne la ville, et inversement.

J'ai trouvé les ressources, mais je ne sais pas les installer.

Les liens sont les suivants: c'est le deuxième exemple sur la page : Compléter le champ avec le premier nom de la ville trouvé.

https://vicopo.selfbuild.fr/ cela donne

https://jsfiddle.net/KyleKatarn/48uu...paign=48uuL3v5

Il y a tous les ressources, mais je ne sais pas les installer.

Si une âme charitable peut m'aider PAS A PAS ( pas de soucis pour le code html ou css ) , mais je ne sais pas pour les JS et les JQUERY etc.

je vous remercie par avance et vous souhaite une bonne soirée

**Tryall** · 04/05/2020, 19h34

Pour le Javascript, tu peux exécuter le code de ces scripts directement dans le fichier html à l'intérieur d'une balise <script> //mon code javascript </script>
Jquery doit être chargé au préalable. Voici le code à entrer pour charger Jquery depuis les CDN de google :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script         src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Il vaut évidement mettre le code ci-dessus avant celui de ton javascript.

Cela devrait fonctionner correctement si tu n'as pas changé le code de l'exemple.

**elgringo67000** · 04/05/2020, 19h42

J'installe où ça ?
est ce dans le head...
ou dans le body
ce que j'ai fait

Code html :

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <link rel="stylesheet" type="text/css" href="fichier.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $('#ville').keyup(function (e) {
      if (e.keyCode == 13) {
        var $ville = $(this);
        $.vicopo($ville.val(), function (input, cities) {
          if (input == $ville.val() && cities[0]) {
            $ville.val(cities[0].city).vicopoTargets().vicopoClean();
          }
        });
        e.preventDefault();
        e.stopPropagation();
      }
    });
  </script>
</head>
 
<body>
  <p>
    <label> Tapez le début d'un nom de ville ou d'un code postal puis appuyez sur <b>Entrée</b>.<br>
      <input id="ville" placeholder="Entrez un code postal ou une ville" autocomplete="off" size="50">
    </label>
  </p>
  <ul>
    <li data-vicopo="#ville">
      <strong data-vicopo-code-postal></strong>
      <span data-vicopo-ville></span>
    </li>
  </ul>
</body>
 
</html>

**Tryall** · 05/05/2020, 22h35

Le javascript, c'est mieux en bas de page. juste au dessus de t'as balise </body> (celle qui ferme ton body)

**elgringo67000** · 06/05/2020, 09h09

ça ne fonctionne pas.

Invité · 06/05/2020, 10h20

Bonjour,

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script>
$(function(){
 
   // code jQuery.....
 
});
</script>

**elgringo67000** · 06/05/2020, 11h10

D'abord merci pour vos réponses..
ce que je fais et qui ne fonctionne pas... je préfère tout poster...vraiment je patauge..

les ressources sont au lien suivant pour que vous ayez une idée ...
https://jsfiddle.net/KyleKatarn/48uu...paign=48uuL3v5

Mon code qui ne fonctionne pas

Code HTML :

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
<html lang="fr">
 
<head>
  <link rel="stylesheet" type="text/css" href="fichier.css">
 
  <script>
    $('#ville').keyup(function (e) {
      if (e.keyCode == 13) {
        var $ville = $(this);
        $.vicopo($ville.val(), function (input, cities) {
          if (input == $ville.val() && cities[0]) {
            $ville.val(cities[0].city).vicopoTargets().vicopoClean();
          }
        });
        e.preventDefault();
        e.stopPropagation();
      }
    });
  </script>
</head>
 
<body>
  <p>
    <label> Tapez le début d'un nom de ville ou d'un code postal puis appuyez sur <b>Entrée</b>.<br>
      <input id="ville" placeholder="Entrez un code postal ou une ville" autocomplete="off" size="50">
    </label>
  </p>
  <ul>
    <li data-vicopo="#ville">
      <strong data-vicopo-code-postal></strong>
      <span data-vicopo-ville></span>
    </li>
  </ul>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
 
</html>

-----------------------------------------

Invité · 06/05/2020, 11h25

Normal : tu as oublié d'intégrer l'API :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://vicopo.selfbuild.fr/api.js"></script>

**elgringo67000** · 06/05/2020, 11h51

J'ai fait cela cela donne rien
les deux liens je les ai placé à la fin...

Code HTML :

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <link rel="stylesheet" type="text/css" href="fichier.css">
 </head>
 
 
 <script>
    $('#ville').keyup(function (e) {
      if (e.keyCode == 13) {
        var $ville = $(this);
        $.vicopo($ville.val(), function (input, cities) {
          if (input == $ville.val() && cities[0]) {
            $ville.val(cities[0].city).vicopoTargets().vicopoClean();
          }
        });
        e.preventDefault();
        e.stopPropagation();
      }
    });
 </script>
 
<body>
 
<p>
  <p>
    <label> Tapez le début d'un nom de ville ou d'un code postal puis appuyez sur <b>Entrée</b>.<br>
      <input id="ville" placeholder="Entrez un code postal ou une ville" autocomplete="off" size="50">
    </label>
  </p>
  <ul>
    <li data-vicopo="#ville">
      <strong data-vicopo-code-postal></strong>
      <span data-vicopo-ville></span>
    </li>
  </ul>
  </p>
 
 
 
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
   <script src="https://vicopo.selfbuild.fr/api.js"></script>
 
 
 
 
</body>
 
</html>

Invité · 06/05/2020, 12h00

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
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://vicopo.selfbuild.fr/api.js"></script>
  <script>
    $(function(){
      $('#ville').keyup(function (e) {
        if (e.keyCode == 13) {
          var $ville = $(this);
          $.vicopo($ville.val(), function (input, cities) {
            if (input == $ville.val() && cities[0]) {
              $ville.val(cities[0].city).vicopoTargets().vicopoClean();
            }
          });
          e.preventDefault();
          e.stopPropagation();
        }
      });
    });
  </script>

**elgringo67000** · 06/05/2020, 12h14

Merci beaucoup à vous tous.
Bon dé confinement

Auto complétion ville - code postal

jQuery

Discussions similaires

Partager

Partager