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

Affichage de résultats avec autocomplete [Plugin]

jQuery

Vue hybride

Discussions similaires

Partager

Partager