Autocomplete en deux temps avec php,mysql,json.

**ZoummuoZ** · 06/05/2018, 11h22

Bonjour à tous et merci de porter un intérêt a mon post,
Je suis depuis deux jours sur un problème que j'identifie comme étant un pb json.
Je vous post les différents script :

PHP :

Code php :

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
if (isset($_GET['term']) and strlen($_GET['term'])>=3){
    $return_arr = array();
 
    try {
		//ON SE CONNECTE A MYSQL !!
        $conn = new PDO('mysql:host='.SERVERMYSQL.';dbname='.DBMYSQL, USERMYSQL, PASSMYSQL, array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
		//ON PREPARE LA REQUETE SUR LE SERVEUR - ATTENTE DU PARAMETRE 'TERM'
        $stmt = $conn->prepare('SELECT CONCAT(`ETAB_NOM`, " - ",`ETAB_CP`, " - ", `ETAB_VILLE`) as ETABLISSEMENT, `ETAB_ID` as ETAB_ID FROM `etablissement` WHERE `ETAB_NOM` LIKE :term' );
		//ON REMPLACE LE TERM PAR CELUI RECUPERE !
		$stmt->execute(array('term' => '%'.$_GET['term'].'%'));
 
		//EXPLODE VERS UN TABLEAU DES RESULTATS
		$return_arr = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
 
	//SORTIE AU FORMAT JSON !!!
    echo json_encode($return_arr);
 
	// on ferme la connexion à mysql
	//$conn = null;
}

Ce qui donne en JSON :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
[{
  "ETABLISSEMENT": "CHU NICE (Nice) - 06003 - NICE CEDEX 1",
  "ETAB_ID": "EJ_000039"
}, {
  "ETABLISSEMENT": "CHU AP-HM (Marseille) - 13354 - MARSEILLE CEDEX 05",
  "ETAB_ID": "EJ_000082"
}, {
  "ETABLISSEMENT": "CHU CAEN (Caen) - 14033 - CAEN CEDEX 9",
  "ETAB_ID": "EJ_000087"
}, {
  "ETABLISSEMENT": "CHU DIJON (Dijon) - 21034 - DIJON CEDEX",
  "ETAB_ID": "EJ_000110"
}...]

J'ai mon javascript enfin, qui lorsque je sélectionne une valeur sur "ETAB", cherche à compléter un autre champs avec la seconde valeur retournée par le JSON (ETAB_ID) :
Les deux imput son "tags" et "ETAB_ID"

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
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function()
{
  var recherche = {
            source: 'search.php',
			dataType: "jsonp",
            minLength:3,
			contentType: "application/json; charset=utf-8",
            select: function(event, ui)
            {
              $('#ETAB').val(ui.item.ETABLISSEMENT);
			  $('#ETAB_ID').val(ui.item.ETAB_ID);
            },
          };
  $('#tags').autocomplete(recherche);
});
</script>
</head>
<body>
<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top;">
      <form method="post" action="personnel.php" enctype="multipart/form-data" name="FichePersonnel">
 
                <label for="ETAB">Nom de votre établissement : </label>
		<input  type='text' class='ui-autocomplete-input' id="tags">
		<br>
		<label for="ETAB_ID">ID de votre établissement : </label>
		<input id="ETAB_ID">
...

Que se passe t'il :
Nom : jquery.png
Affichages : 1313
Taille : 6,2 Ko

Je ne peux selectionner une valeur, donc tester le script ...
Si je ne mets que un seul champ en SELECT dans la requete (ETABLISEMENT) cela fonctionne parfaitement, mais je n'ai pas l'autre info (je vais la rechercher par un autre moyen mais je ne supporte pas ne pas comprendre ... et trouver !)

Hellpp !

**Toufik83** · 06/05/2018, 16h44

bonjour,
les items de ton input #tags sont vide par-ce-que l'autocomplete attend un objet ayant la structure {label:'...',value:'...'}.
pour résoudre ce problème il faut utiliser ajax en interne, comme suite :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var recherche = {
	source:function( request, response ){
		$.ajax({url:'search.php'
			,dataType:'json'
			,method:'get'
			,data:{term:request.term}
			,cache:false
			,success:function(s){
				if(!s.erreur){
					response(
						$.map(s
							,function(k,index){
								return {
									value:k.ETAB_ID
									,label:k.ETABLISSEMENT
								};
						})
					);
				}
 
			}
			,error:function(err){alert(err.responseText);}
		});
	}
	,minLength:3
	,select: function(event, ui){
	            console.log('item.label :'+ui.item.label);
		    $('#tags').val(ui.item.label);//tu n'a pas un élément ayant le id #ETAB, tu as plutôt #tags
		    $('#ETAB_ID').val(ui.item.value);
		    return false;//return false est importante pour ne pas changer la valeur de #tags au moment du select.
	}
         //, supprime cette virgule, c une erreur de syntaxe !
};

et le php

Code php :

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
 <?php
 $return_arr = array();//le tableau doit être déclaré dehors les conditions if else...
if (isset($_GET['term']) and strlen($_GET['term'])>=3){
	//ON SE CONNECTE A MYSQL !!
        $conn = new PDO('mysql:host='.SERVERMYSQL.';dbname='.DBMYSQL, USERMYSQL, PASSMYSQL, array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
         //ON PREPARE LA REQUETE SUR LE SERVEUR - ATTENTE DU PARAMETRE 'TERM'
        $stmt = $conn->prepare('SELECT CONCAT(`ETAB_NOM`, " - ",`ETAB_CP`, " - ", `ETAB_VILLE`) as ETABLISSEMENT, `ETAB_ID` as ETAB_ID FROM `etablissement` WHERE `ETAB_NOM` LIKE :term' );
	//ON REMPLACE LE TERM PAR CELUI RECUPERE !
	$stmt->execute(array(':term' => '%'.$_GET['term'].'%'));
        $return_arr=$stmt->fetchAll(PDO::FETCH_ASSOC);
}
else{ 
	$return_array['erreur']='min length < 3';
}
echo json_encode($return_arr);
?>

**ZoummuoZ** · 06/05/2018, 21h47

Grand merci pour cette réponse ultra complète ... je comprends mieux mon erreur. Je suis décidement pas javascript like, ou ajax like ;-)

Je teste tout cela et revient vers toi (avec de bonnes nouvelles je pense ;-)) ->

**ZoummuoZ** · 07/05/2018, 09h51

Bonjour à tous,

Par cette belle matinée, je vous affirme que l'objectif est atteind !
Un grand merci pour le support !

Je n'ai pas tout compris hélas :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
$(document).ready(function()
{
var recherche = {
	source:function( request, response ){
		$.ajax({url:'search.php' //Source du JSON
			,dataType:'json'
			,method:'get'
			,data:{term:request.term} //Valuer envoyée
			,cache:false
			,success:function(s){ //Si un JSON est retourné
				if(!s.erreur){ //Et que ce n'est pas une erreur
					response(
						$.map(s //Relookage du JSON PHP en JSON Jquery
							,function(k,index){
								return {
									value:k.ETAB_ID
									,label:k.ETABLISSEMENT
								};
						})
					);
				}
 
			}
			,error:function(err){alert(err.responseText);} //En sur le JSON ou le champs $tags on retourne cette erreur via une boite de dialogue
		});
	}
	,minLength:3 // NB de car entrés avant appel au PHP
	,select: function(event, ui){ //Si on fait un choix dans la liste on lance cette fonction
	            console.log('item.label :'+ui.item.label); //Gestion des erreurs sur la console de dev ...
		    $('#tags').val(ui.item.label); //On assigne la valeur à #tags
		    $('#ETAB_ID').val(ui.item.value); // Puis a etab_id
		    return false; //return false est importante pour ne pas changer la valeur de #tags au moment du select (je comprends pas trop mais ca marche ...)
	}
 
};
 
  $('#tags').autocomplete(recherche); //On attache l'autocplete JQUERY ici.
 
});

Merci encore !!!

Autocomplete en deux temps avec php,mysql,json.

jQuery

Discussions similaires

Partager

Partager