Auto complétion ville - code postal

Version imprimable

04/05/2020, 20h25
elgringo67000

Auto complétion ville - code postal

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
04/05/2020, 20h34
Tryall

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:

<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.

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

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
<!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>

05/05/2020, 23h35
Tryall

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

ça ne fonctionne pas.

Bonjour,

Code:

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

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:

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>

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

06/05/2020, 12h25
Invité

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

Code:

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

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

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
<!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>

Code:

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>

06/05/2020, 13h14
elgringo67000

Merci

Merci beaucoup à vous tous.
Bon dé confinement