Autocomplete en deux temps avec php,mysql,json.

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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 :
Pièce jointe 377197

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 !

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:

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:

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);
?>

06/05/2018, 21h47
ZoummuoZ

Whouaaaaa ! Toufik83 super merci !!!

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 ;-)) ->

PARFAIT !

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:

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