Récupérer les valeurs d'autocomplète

Bonjour,

J'ai un formulaire Nom, Téléphone et Adresse.
Je voudrais que lorsqu'un client sélectionne un nom, les champs "Telephones" et "Adresse" se remplissent automatiquement.
J arrive a le faire par contre après sélection, mon champs "nom" reste vide alors que les champs tel et adr se remplissent correctement.
Pièce jointe 635129
Comment afficher la valeur selectionné dans le champs 'nom'.
Je vous prie de bien vouloir m'aider

Le formulaire avec js

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
  <title>Formulaire </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-BJnMxKY7XJivOD+pi8eWteNd1RiMbPCJzQQIFviRJgo0p/zzZMi1CmYTgEdz/2CszgJjKk3TqtHZItp0JHvJng==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 
  <script>
    $(document).ready(function() {
      // Initialise le champ "nom" en utilisant Select2
      console.log("Appel de select2");
      
 
      $('#nom').select2({
  placeholder: 'Sélectionnez',
  allowClear: true,
  language: {
        searching: function() {
            return "";
        }
    },
  minimumInputLength: 0, // Nombre minimal de caractères pour lancer une recherche
  ajax: {
    url: 'search.php',
    dataType: 'json',
    delay: 0, // Delai d'attente avant d'envoyer la requête
    data: function(params) {
      return {
        q: params.term // Terme de recherche saisi par l'utilisateur
      };
    },
    processResults: function(data) {
      return {
        results: data
      };
    },
    cache: true
  }
}).on('select2:select', function(e) {
    console.log(selectedText);
      console.log($('#nom').val());
  var selectedText = $('#nom').val();
 
 
});
 
 
 
      // Ecouteur d'événement "change" pour le champ "nom"
      $('#nom').on('change', function() {
        // Obtient la valeur sélectionnée pour "nom"
        var nom = $(this).val();
 
        // Envoi d'une requête AJAX pour récupérer les données associées au nom sélectionné
        $.ajax({
          url: 'get_data.php',
          method: 'POST',
          data: {nom: nom},
          dataType: 'json',
          success: function(response) {
            // Met à jour les champs "tel" et "adr" avec les données récupérées
            $('#tel').val(response.tel);
            $('#adr').val(response.adr);
            $('#nom').val(response.nom);
          },
          error: function(xhr, status, error) {
            console.error(error);
          }
        });
      });
    });
  </script>
</head>
<body>
  <h1>Formulaire de recherche</h1>
<form>
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom"><br>
  <label for="tel">Téléphone :</label>
  <input type="text" id="tel" name="tel" readonly><br>
  <label for="adr">Adresse :</label>
  <input type="text" id="adr" name="adr" readonly>
</form>
 
</body>
</html>

Mon code get_data.php

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
<?php
// Connexion à la base de données
$host = 'localhost';
$user = '';
$password = '';
$dbnom = '';
$dsn = "mysql:host=$host;dbname=$dbnom;charset=utf8mb4";
 
try {
  $pdo = new PDO($dsn, $user, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  echo 'Erreur de connexion à la base de données : ' . $e->getMessage();
  exit;
}
 
// Obtient le nom sélectionné par l'utilisateur
$nom = $_POST['nom'] ?? '';
 
// Requête SQL pour récupérer les données associées au nom sélectionné
$sql = "SELECT nom, tel, adr FROM beneficiaire WHERE nom = :nom";
$stmt = $pdo->prepare($sql);
$stmt->execute(['nom' => $nom]);
$result = $stmt->fetch(PDO::FETCH_ASSOC);
 
// Envoi des résultats au format JSON
header('Content-Type: application/json');
echo json_encode($result);

Fichier search.php

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
<?php
// Connexion à la base de données
$host = 'localhost';
$user = '';
$password = '';
$dbnom = '';
$dsn = "mysql:host=$host;dbname=$dbnom;charset=utf8mb4";
 
try {
  $pdo = new PDO($dsn, $user, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  echo 'Erreur de connexion à la base de données : ' . $e->getMessage();
  exit;
}
 
// Obtient le terme de recherche saisi par l'utilisateur
$q = $_GET['q'] ?? '';
 
// Requête SQL pour récupérer les noms correspondant au terme de recherche
$sql = "SELECT nom, tel FROM beneficiaire WHERE nom LIKE :q";
$stmt = $pdo->prepare($sql);
$stmt->execute(['q' => "%$q%"]);
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
// Formatte les résultats pour qu'ils soient utilisables par Select2
$autocomplete_results = [];
foreach ($results as $result) {
  $autocomplete_results[] = [
    'id' => $result['nom'],
    'text' => $result['nom'].' - '.$result['tel']
  ];
}
 
// Envoi des résultats au format JSON
header('Content-Type: application/json');
echo json_encode($autocomplete_results);
 
?>