Sujet Précédent Sujet Suivant

Auto-complete en Jquery/Ajax

Résolu/Fermé
Youn_3451 Messages postés 37 Date d'inscription lundi 19 octobre 2020 Statut Membre Dernière intervention 6 avril 2021 - 23 nov. 2020 à 01:36
jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025 - 24 nov. 2020 à 18:20
Bonjour, récemment je suis venu sur le forum pour me renseigne par rapport a un système d'auto-complétions d'info dans des inputs avec des infos de la base de données :
Apres de nombreuses heures de recherche j'ai aboutie à un script mais il ne marche pas , quelqu'un pourrai m'aide s'il vous plais.

Image du forum (Avec var_dump de la bdd)



Code Html / Jquery ---------> ajax.php 

<?php 

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
require_once 'php/config.php';

    $pdoS = $bdd->prepare('SELECT name_client, prenom, tel FROM client');
    $pdoS->execute();
    $client = $pdoS->fetchAll();

?>

<!DOCTYPE html>
<html class="loading" lang="fr" data-textdirection="ltr">
<!-- BEGIN: Head-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>Auto complete</title>
    <link rel="apple-touch-icon" href="../../../app-assets/images/ico/apple-icon-120.png">
    <link rel="shortcut icon" type="image/x-icon" href="../../../app-assets/images/ico/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,600%7CIBM+Plex+Sans:300,400,500,600,700" rel="stylesheet">

    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/vendors.min.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Theme CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap-extended.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/colors.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/dark-layout.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/semi-dark-layout.css">
    <!-- END: Theme CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/pages/app-invoice.css">
    <!-- END: Page CSS-->

    <!-- BEGIN: Custom CSS-->
    <link rel="stylesheet" type="text/css" href="../../../assets/css/style.css">
    <!-- END: Custom CSS-->

</head>


<body>
<style>.line{text-decoration: underline; color: red;}</style>



<form action="php/rqtinsert.php" method="POST">
   <?php var_dump($client); ?>

   <div class="form-group">
   <br>
   <hr>
   <br>
   </div>

   <div class="form-group">
       <label>*Nom :</label>
       <select name="nom" id="nom" class="form-control text-center" required>    
          <?php foreach($client as $clientt): ?>                                                            
          <option value="<?= $clientt['name_client']; ?>"><?= $clientt['name_client']; ?></option>
          <?php endforeach; ?>
       </select> 
   </div>
   <br><br>

   <div class="form-group">
       <label>*Prénom :</label>
       <select name="prenom" id="prenom" class="form-control text-center" required>                                                            
          <option value=""></option>
       </select>
   </div>
   <br><br>

   <div class="form-group">
       <label>*Téléphone :</label>
       <input name="telephone" id="telephone" type="text" class="form-control text-center" placeholder="Téléphone" required>
   </div>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        function loadData (type, category_id) {
            $.ajax({
                url : "load-cs.php",
                type : "POST",
                data : {type : type, id : category_id},
                succes : function(data){
                    if(type == "prenomdata"){
                        $("#prenom").html(data);
                    }else {
                        $("#nom").append(data);
                    }
                }
            });
        }

        loadData();

        $("#nom").on("change", function(){
            var nom = $("#nom").val();

            loadData("prenomdata", nom);
        })
    });


</script>





<!-- BEGIN: Vendor JS-->
    <script src="../../../app-assets/vendors/js/vendors.min.js"></script>
    <script src="../../../app-assets/fonts/LivIconsEvo/js/LivIconsEvo.tools.js"></script>
    <script src="../../../app-assets/fonts/LivIconsEvo/js/LivIconsEvo.defaults.js"></script>
    <script src="../../../app-assets/fonts/LivIconsEvo/js/LivIconsEvo.min.js"></script>
    <!-- BEGIN Vendor JS-->

    <!-- BEGIN: Page Vendor JS-->
    <script src="../../../app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="../../../app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="../../../app-assets/vendors/js/forms/repeater/jquery.repeater.min.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Theme JS-->
    <script src="../../../app-assets/js/scripts/configs/vertical-menu-dark.js"></script>
    <script src="../../../app-assets/js/core/app-menu.js"></script>
    <script src="../../../app-assets/js/core/app.js"></script>
    <script src="../../../app-assets/js/scripts/components.js"></script>
    <script src="../../../app-assets/js/scripts/footer.js"></script>
    <!-- END: Theme JS-->

    <!-- BEGIN: Page JS-->
    <script src="../../../app-assets/js/scripts/pages/app-invoice.js"></script>
    <script src="../../../app-assets/js/scripts/pages/app-add_facture.js"></script>
    <script src="../../../app-assets/js/scripts/pages/myFunction_facture.js"></script>
    <!-- END: Page JS-->

</body>


</html>


Code php ------------> load-cs.php 

<?php 

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);


$conn = mysqli_connect("localhost", "root", "", "u243663731_");

if (mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

if($_POST['type'] == ""){
    $sql = "SELECT * FROM client WHERE id_session='1'";

    $query = mysqli_query($conn, $sql) or die ("Pas de query");

    $str = "";
    while($row = mysqli_fetch_assoc($query)){
        $str .= ' <option value="'.$row['prenom'].'">'.$row['prenom'].'</option> ';
    }
}else if($_POST['type'] == "prenomdata"){
    $sql = "SELECT * FROM client WHERE id_session='1' AND name_client='{$_POST['type']}'";

    $query = mysqli_query($conn, $sql) or die ("Pas de query");

    $str = "";
    while($row = mysqli_fetch_assoc($query)){
        $str .= ' <option value="'.$row['prenom'].'">'.$row['prenom'].'</option> ';
    }
}

echo $str;


?>
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025 4 741
Modifié le 23 nov. 2020 à 15:18
Pfffiiiouuuuu .... du copier/coller dans tous les sens sans comprendre une seule ligne de ce que tu fais. Voila à quoi me fait penser ton code..
Pourquoi faire du mysqli dans le fichier ajax, alors que tu utilises PDO sur ta page principale ??

Enfin bon,

Côté PHP: 
<?php 
//---------------------------------------------------------//
// FICHIER : load-cs.php
//---------------------------------------------------------//
//Affichage des erreurs PHP
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//connexin à la bdd
require_once 'php/config.php';

//récupération PROPRE des variables AVANT de les utiliser
$id = !empty($_POST['id']) ? $_POST['id'] : NULL;


if($id){

  $sql = "SELECT id
                ,name_client
                ,prenom
                ,adresse
                ,email
                ,tel
          FROM `client` 
          WHERE id = :id ";

  $datas = array(':id'=>$id);

  try {
    $pdoS = $bdd->prepare($sql);
    $pdoS->execute($datas);
    $client = $pdoS->fetch();
  } catch (Exception $e) {
    echo "Erreur : " . $e->getMessage();
  }
}else{
  //Aucun id envoyé dans la requête
  $client = NULL;
}

//on renvoie les données au format JSON
echo json_encode($client);


Au niveau de ta liste ( code html) 
 <label>*Nom :</label>
        <select name="nom" id="nom" class="form-control text-center" required>    
          <?php foreach ($client as $C): ?>                                                            
            <option value="<?php echo $C['id']; ?>"><?php echo $C['name_client']; ?></option>
          <?php endforeach; ?>
        </select>


Côté javascript : 
  function loadDatas(id) {
        var data = {id: id};
        $.ajax({
            type: "POST",
            url: "load-cs.php",
            data: data,
            async: true,
            dataType: "json"
        }).done(function (reponse) {
          var prenom = typeof (reponse.prenom) != 'undefined' ? reponse.prenom : '-';
          var tel = typeof (reponse.tel) != 'undefined' ? reponse.tel : '-';
          $("#prenom").val(prenom);
          $("#telephone").val(tel);

        }).fail(function (jqXHR, textStatus) {
          alert('Ajax error');
          console.log({textStatus}, {jqXHR})
        });

      }

      $(document).ready(function (){

        loadDatas();

        $("#nom").on("change", function (){
            var id = $(this).val(); // ID correspondant dans la bdd au nom selectionné
            loadDatas(id);
        });
      });


1
Youn_3451
23 nov. 2020 à 17:07
Vous avez totalement raison, je code que j'ai copier coller je ne comprend rien faim pratiquement rien, alors que le votre tout me parait logique, c'est fou, grace a votre code je voit 100x plus clair vraiment.

Merci beaucoup <3
0
Réponse 2 / 3
jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025 4 741
23 nov. 2020 à 06:31
Bonjour 
$sql = "SELECT * FROM client WHERE id_session='1' AND name_client='{$_POST['type']}'";

Tu es sûr que c'est la variable type qu'il faut utiliser ? Ca ne serait pas plutôt l'id ?
0
Youn_3451 Messages postés 37 Date d'inscription lundi 19 octobre 2020 Statut Membre Dernière intervention 6 avril 2021
23 nov. 2020 à 14:50
Oui re bonjour, j'ai fait n'importe quoi parce que j'ai voulue adapter le code que j'ai recopie sur une video sauf que la video ne correspond pas a mon besoin parce que , le youtubeur utilise 2 tables alors que moi j'utilise une seul table , deplus lui c'est 2 select est moi c'est 1 select et un input=text

code de base qui fonctionne --> index.php 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dynamic Dependent Select Box</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="main">
		<div id="header">
			<h1>Espace client</h1>
		</div>
		<div id="content">
			<form method="">
        <label>Nom client : </label>
        <select id="country">
        	<option value="">Selectionnez un client</option>
        </select>
				<br><br>
        <label>Prenom : </label>
        <select id="state">
        	<option value=""></option>
        </select>
      </form>
		</div>
	</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  	function loadData(type, category_id){
  		$.ajax({
  			url : "load-cs.php",
  			type : "POST",
  			data: {type : type, id : category_id},
  			success : function(data){
  				if(type == "stateData"){
  					$("#state").html(data);
  				}else{
  					$("#country").append(data);
  				}
  				
  			}
  		});
  	}

  	loadData();

  	$("#country").on("change",function(){
  		var country = $("#country").val();

  		if(country != ""){
  			loadData("stateData", country);
  		}else{
  			$("#state").html("");
  		}

  		
  	})
  });
</script>
</body>
</html>



code php ---> load-cs.php 

<?php

	$conn = mysqli_connect("localhost","root","","ajax") or die("Connection failed");

	if($_POST['type'] == ""){
		$sql = "SELECT * FROM country_tb";

		$query = mysqli_query($conn,$sql) or die("Query Unsuccessful.");

		$str = "";
		while($row = mysqli_fetch_assoc($query)){
		  $str .= "<option value='{$row['cid']}'>{$row['cname']}</option>";
		}
	}else if($_POST['type'] == "stateData"){

		$sql = "SELECT * FROM state_tb WHERE country = {$_POST['id']}";

		$query = mysqli_query($conn,$sql) or die("Query Unsuccessful.");

		$str = "";
		while($row = mysqli_fetch_assoc($query)){
		  $str .= "<option value='{$row['sid']}'>{$row['sname']}</option>";
		}
	}

	echo $str;
 ?>


base de données ------->


table = country_tb



table = state_tb



J'ai essaye 12312x de le faire a ma manière mais je n'y arrive pas ce que je voudrai c'est que quand je selectionne le nom du client dans mon select les input (adresse),input (email),input (tel) se complete automatiquement par rapport au nom du client

ma bdd

id
name_client
adresse
email
tel
id_session
0
Réponse 3 / 3
Youn_3451 Messages postés 37 Date d'inscription lundi 19 octobre 2020 Statut Membre Dernière intervention 6 avril 2021
24 nov. 2020 à 12:25
Bonjour, j'ai essaye de dupliquer le code js d'auto complétions parce que j'utilise 2 form dans ma page mais pour le premier ca fonctionne par contre pour le deuxième cela ne marche pas, j'ai bien fait en sorte de changer tout les variables et de a chaque fois vider le cash mais tout le alert avec le message quand j'essaye ...

Dans la console :



Code js --------> complete-facture.js 

function loadDatasclient(name_client) {
        var data = {name_client: name_client};
        $.ajax({
            type: "POST",
            url: "php/load-cs-client.php",
            data: data,
            async: true,
            dataType: "json"
        }).done(function (reponse) {
          var adresse = typeof (reponse.adresse) != 'undefined' ? reponse.adresse : '';
          var email = typeof (reponse.email) != 'undefined' ? reponse.email : '';
          var departement = typeof (reponse.departement) != 'undefined' ? reponse.departement : '';
          var tel = typeof (reponse.tel) != 'undefined' ? reponse.tel : '';
          $("#adresse").val(adresse);
          $("#departement").val(departement);
          $("#email").val(email);
          $("#telephone").val(tel);

        }).fail(function (jqXHR, textStatus) {
          alert('Ajax error');
          console.log({textStatus}, {jqXHR})
        });

      }

      $(document).ready(function (){

        loadDatasclient();

        $("#facturepour").on("change", function (){
            var name_client = $(this).val(); // ID correspondant dans la bdd au facturepour selectionné
            loadDatasclient(name_client);
        });
      });


      // article


function loadDatasarticle(article) {
        var datat = {article: article};
        $.ajax({
            type: "POST",
            url: "php/load-cs-article.php",
            data: datat,
            async: true,
            dataType: "json"
        }).done(function (reponses) {
          var referencearticle = typeof (reponses.referencearticle) != 'undefined' ? reponses.referencearticle : '';
          $("#referencearticle").val(referencearticle);

        }).fail(function (jqXHR, textStatus) {
          alert('Ajax error');
          console.log({textStatus}, {jqXHR})
        });

      }

      $(document).ready(function (){

        loadDatasarticle();

        $("#article").on("change", function (){
            var article = $(this).val(); // ID correspondant dans la bdd au facturepour selectionné
            loadDatasarticle(article);
        });
      });


Code php pour client --------> load-cs-client.php 

<?php 
//Affichage des erreurs PHP
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//connexin à la bdd
require_once 'config.php';

//récupération PROPRE des variables AVANT de les utiliser
$id = !empty($_POST['name_client']) ? $_POST['name_client'] : NULL;


if($id){

  $sql = "SELECT id
                ,name_client
                ,adresse
                ,departement
                ,email
                ,tel
          FROM `client` 
          WHERE id_session = '1' AND name_client = :name_client ";

  $datas = array(':name_client'=>$id);

  try {
    $pdoS = $bdd->prepare($sql);
    $pdoS->execute($datas);
    $client = $pdoS->fetch();
  } catch (Exception $e) {
    echo "Erreur : " . $e->getMessage();
  }
}else{
  //Aucun id envoyé dans la requête
  $client = NULL;
}

//on renvoie les données au format JSON
echo json_encode($client);


code pour article php -----------> load-cs-article.php 

<?php 
//Affichage des erreurs PHP
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//connexin à la bdd
require_once 'config.php';

//récupération PROPRE des variables AVANT de les utiliser
$idd = !empty($_POST['article']) ? $_POST['article'] : NULL;


if($id){

  $sqll = "SELECT id
                ,article
                ,referencearticle
          FROM `article` 
          WHERE id_session = '1' AND article = :article ";

  $datas = array(':article'=>$idd);

  try {
    $pdoSt = $bdd->prepare($sqll);
    $pdoSt->execute($datas);
    $article = $pdoSt->fetch();
  } catch (Exception $ee) {
    echo "Erreur : " . $ee->getMessage();
  }
}else{
  //Aucun id envoyé dans la requête
  $article = NULL;
}

//on renvoie les données au format JSON
echo json_encode($article);


HTML

pour client -->

select article --> name="article" id="article"
input reference article ---> name="referencearticle" id="referencearticle"

BDD

pour article :

id
article
re
0
jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025 4 741
24 nov. 2020 à 14:15
Pourquoi fais tu ta requête sur le name_client au lieu de son id tel que je te l'avais fait pour ton autre code ,?

De plus, il semble que la recherche ne retourne rien, ou que tu as une erreur dans le php....
Pour le voir, il faudrait
1 - Utiliser Firefox ( plus simple pour débuguer de l'ajax )
2 - Dans la console, activer le debugage XHR
3 - Regarder la réponse de l'appel à l'ajax


0
Youn_3451 Messages postés 37 Date d'inscription lundi 19 octobre 2020 Statut Membre Dernière intervention 6 avril 2021 > jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025
Modifié le 24 nov. 2020 à 17:40
j'ai utilise name_client parce que dans mon form la value de mon select c'est name_client.
J'ai trouve le pb de pouquoi ca marcher pas.
Et j'ai télécharger Firefox merci du conseil.

Par contre dans le php , quand dans la requête select je rajoute id_session n'a ne marche pas j'ai conscience que l'erreur vien du array j'ai du faire une betise mais j'ai pas l'habitude d'utilie cela j'utilise bindvalue habituellement.

code php 

if($id){

  $sql = "SELECT id
                ,referencearticle
                ,prixvente
                ,tvavente
                ,umesure
          FROM `article` 
          WHERE id_session =:id_session AND article = :article ";
// quand je remplace :id_session par '1' ca marche très bien. (et que je supprime dans l'array bien sur)

  $datas = array(':id_session'=>$_SESSION['id_session'], ':article'=>$id);

  try {
    $pdoS = $bdd->prepare($sql);
    $pdoS->execute($datas);
    $article = $pdoS->fetch();
  } catch (Exception $e) {
    echo "Erreur : " . $e->getMessage();
  }
}else{
  //Aucun id envoyé dans la requête
  $article = NULL;
}
0
jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025 4 741 > Youn_3451 Messages postés 37 Date d'inscription lundi 19 octobre 2020 Statut Membre Dernière intervention 6 avril 2021
24 nov. 2020 à 17:42
Est-ce que au moins tu as mis un session_start au debut de ce fichier php ?

Après, tu peux remplacer par du bind si tu préfères ... mais ça ne chargera rien à ton souci si tu n'as pas démarré les sessions dans le script php de ton ajax...
0
Youn_3451 Messages postés 37 Date d'inscription lundi 19 octobre 2020 Statut Membre Dernière intervention 6 avril 2021 > jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025
Modifié le 24 nov. 2020 à 17:55
Au non, vous êtes tellement fort, je veut etre comme vous :') je pleurt de rire vous pensez à tout :')))))))))))
0
jordane45 Messages postés 38464 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 12 avril 2025 4 741 > Youn_3451 Messages postés 37 Date d'inscription lundi 19 octobre 2020 Statut Membre Dernière intervention 6 avril 2021
24 nov. 2020 à 18:20
après quelques années d'expérience, tu seras aussi bon, voir meilleur que moi...
0

Discussions similaires

Langue dans Android auto
JIDOTO -
Utilisateur anonyme -

1 réponse