Affichage de résultats avec autocomplete

**bronon** · 29/11/2013, 12h17

Bonjour à tous,
Je viens vers vous avec un souci dont je n'arrive pas à me sortir depuis quelques heures.
Je cherche à mettre en place le widget autocomplete standard de jQuery.
Visiblement le script se lance bien, mais il n'affiche aucun résultat en retour.
Mon code HTML :

Code html :

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Remote with caching</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="FS/Style.css" />
  <style>
  .ui-autocomplete-loading {
    background: white url('Images/ajax-Petit-loader.gif') right center no-repeat;
  }
  </style>
  <script>
...
  </script>
</head>
<body>
<div class="ui-widget">
	<label for="birds">Birds: </label>
  <input id="birds" />
</div>
</body>
</html>

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
  $(function() {
    var cache = {};
    $( "#birds" ).autocomplete({
      minLength: 4,
      source: function( request, response ) {
        var term = request.term;
        if ( term in cache ) {
          response( cache[ term ] );
          return;
        }
 
        $.getJSON( "PHP/rechercheEmail.php", request, function( data, status, xhr ) {
          cache[ term ] = data;
          response( data );
        });
      }
    });
  });

Le code PHP du fichier de recherche :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
include("../XXXX/Connexion.php");
$search = protect($_GET['term']);
$result = mysql_query("SELECT Email FROM Essai1 WHERE Email LIKE '$search%' ORDER BY Email ASC") or die('Erreur de process');
$json = array();
$first = true;
while ($row = mysql_fetch_assoc($result)) {
	array_push($json, "{'value':'".$row['Email']."'}");
}
echo json_encode($json);
?>

Si quelqu'un peut me dire pourquoi ce script ne fonctionne pas jusqu'au bout, d'avance merci

**ABCIWEB** · 30/11/2013, 00h44

Je ne sais pas si l'erreur provient de là, mais pour créer un tableau json en php on utilise la fonction json_encode,cela t'éviteras des manipulations périlleuses.
Et pour être certain d'avoir la bonne entête tu peux indiquer

Code :

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

header('Content-type: application/json');

dans ton code php (avant l'affichage).

**bronon** · 30/11/2013, 14h00

Merci pour ta réponse,
Mais ce n'est pas la solution j'ai testé en ajoutant le header dans le PHP, rien n'y fait.
Merci encore

**NoSmoking** · 30/11/2013, 15h23

Bonjour,
il te manque un essai à faire apparemment

Envoyé par ABCIWEB

Je ne sais pas si l'erreur provient de là, mais pour créer un tableau json en php on utilise la fonction json_encode,cela t'éviteras des manipulations périlleuses.

**bronon** · 30/11/2013, 18h35

Merci pour ta remarque… pleine d'ironie,
Effectivement le code affiché sur ce forum n'est plus le dernier en date, j'avais déjà ajouté json_encode depuis quelques temps.
Ceci ne résout absolument pas le problème.
D'autres suggestions ?

**ABCIWEB** · 01/12/2013, 03h27

Et c'est quoi le dernier code en date ? parce que si cela ressemble au bin's du premier code, y'a des corrections à faire. En tous cas on ne peut pas juger d'un code qu'on ne voit pas

Sinon pour vérifier le retour php on peut utiliser un module comme Firebug pour Firefox ou les outils de chrome. Ainsi tu verras bien si la réponse attendue est correcte.

**NoSmoking** · 01/12/2013, 08h53

De plus il semblerait que tu ais un console.log('Response : '+xhr.responseText) qui traine hors de portée de ta variable xhr.

Code :

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

1
2
3
4
5
$.getJSON( "PHP/rechercheEmail.php", request, function( data, status, xhr ) {
    console.log('Response : '+xhr.responseText); // il semble mieux ici
    cache[ term ] = data;
    response( data );
});

**papajoker** · 01/12/2013, 09h06

Pour moi ton problème vient de php !

tu génères une chaine type format json puis tu fais un json_encode de cette chaine

La bonne démarche est de faire un json_encode() d'un tableau ou d'un objet php !

de + $_GET['term'] est non défini

Code :

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

1
2
$.getJSON("test.php",   { term: "toto" } , ... )
$.getJSON("test.php?term=toto" , ... )

**bronon** · 01/12/2013, 10h51

Envoyé par NoSmoking

De plus il semblerait que tu ais un console.log('Response : '+xhr.responseText) qui traine hors de portée de ta variable xhr.

Code :

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

1
2
3
4
5
$.getJSON( "PHP/rechercheEmail.php", request, function( data, status, xhr ) {
    console.log('Response : '+xhr.responseText); // il semble mieux ici
    cache[ term ] = data;
    response( data );
});

Corrigé,
Merci pour ta remarque

**bronon** · 01/12/2013, 11h53

Merci à tous pour vos réponses,
Grâce à elles j'ai bien fait progresser mon problème.
Dernier petit problème à régler, le script PHP me retourne les valeurs suivantes :

Code :

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

["{'value':'jxxxx@yyyl.com'}","{'value':'jxxxx@yyyl.fr'}"]

Qui me charge de ce fait dans l'input :

Code :

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

{'value':'jxxxx@yyyll.com'}

Il y a encore des problèmes avec le format jSon, je ne sais pas comment faire pour nous n'obtenir que le Email.
Ce dernier conseil me serait très utile, ayant encore quelques problèmes avec ce format jSon.
Quelque soit la syntaxe utilisée dans le script PHP j'obtiens systématiquement en retour une erreur.
D'avance merci à tous.

**papajoker** · 01/12/2013, 12h25

déjà dit plus haut, tu transformes une variable php en json comme suis, par exemple

Code :

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

1
2
3
4
5
$json=array();
while ($row = mysql_fetch_assoc($result)) {
	$json[]=$row['Email'];
}
echo json_encode($json);

**bronon** · 01/12/2013, 14h05

Merci pour ta réponse mais ta notation $json[] n'est accessible qu'à partir de PHP5.4, je développe sur un serveur en PHP 5.3.5.xx.
Je viens de régler le problème avec :

Code :

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

array_push($json, $row['Email']);

Encore 1000 merci à tous.
Bon dimanche

**papajoker** · 01/12/2013, 14h32

Envoyé par bronon

Merci pour ta réponse mais ta notation $json[] n'est accessible qu'à partir de PHP5.4

php 3 tu veux dire

(voir même php2 !)

php5.4 c'est $json=[1,2,3] qui est nouveau

ps:regarde dans la doc http://php.net/manual/fr/function.array-push.php
ma notation est conseillée

Envoyé par docphp

Note: Si vous utilisez la fonction array_push() pour ajouter un élément à un tableau, il est mieux de la remplacer par l'opérateur $array[] = qui évite le passage par une fonction.

**ABCIWEB** · 01/12/2013, 17h13

Oui et au passage, tu verras à l'usage que les fonctions php sur les tableaux sont beaucoup, beaucoup plus nombreuses et puissantes que les fonctions javascript.
D'ailleurs chaque fois que c'est possible on utilise php pour travailler sur les tableaux et on ne fait souvent que le strict minimum en javascript car côté javascript c'est la grande misère.

Affichage de résultats avec autocomplete [Plugin]

jQuery

Discussions similaires

Partager

Partager