Discussion :

[Aoernis]

Bonjour

Je me suis heurté à un problème en utilisant le module autocomplete de JqueryUI. Le souci c'est que je ne sais pas vraiment d’où cela vient.

Voila la situation. Je cherche à appeler un script php, afin de récupérer des info au format JSON, comme autocomplete les attend.
Je l'appel en POST et lui passe comme paramètre la chaine que l'utilisateur et entrain d'écrire, ainsi que la valeur d'un select.
A la suite de quoi le script effectue des requetes dans la db, et renvois une chaine de caractère du format suivant :
["data1","data2","data3"];

Elle apparait correctement dans les log de connexion de FireBug bien qu'il la considère comme étant du HTML.

Le souci c'est qu'il ne se passe rien ensuite.
Comme si le retour du script partait dans vide.
Aucune suggestion de cet liste n'est proposé.

C'est la première fois que je manipule du JSON, alors le problème vient peut être de la :/

Voici le code que j'utilise. Es ce que quelqu'un se sent inspiré ?

Code html :

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

1
2
3
4
5
6
7
8
9
<form id="rechercher" name="rechercher">
  <select name="request_type" form="rechercher">
    <option selected="selected" value="people">people</option>
    <option value="video">video</option>
    <option value="photo">photo</option>
  </select>
  <input type="text" name="request_pattern" value="toto" class="champRecherche" />
  <button type="submit" name="btnRecherche" value="" class="btn btn-primary" /><i class="icon-search"></i></input>
</form>

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
<script type="text/javascript">
  $(document).ready(function(){
 
    var request_type = $("select[name='request_type'] option:selected").val();
 
    $("select[name='request_type'] option:selected").change(function(){
      request_type = $("select[name='request_type'] option:selected").val();  
    });
 
    $("input[name='request_pattern']").autocomplete({
        source : function(requete, reponse){
            $.ajax({
                url : '../php/ajax_recherche.php', // chemin du script
                type: 'post',                      // type de requete
                dataType: "json",                  // format du retour
                data : {
                  request_type : request_type,     // valeur du select
                  request_pattern : requete.term   // valeur du champ de recherche
                },
                success : function(donnee){
                  reponse(donnee);
                }
              });
          },
        minLength: 2,
        delay: 500,
        autoFocus: true, 
        my : 'bottom',
        at : 'bottom'
    }); 
  });
 
</script>

Cordialement, merci de m'avoir lu

[splifferwolf]

Bonsoir

Si je ne me trompe pas le format json c'est :

Code :

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

{ 'key1' : 'val1', 'key2' : 'val2', 'key3' : 'val3' }

et non

Code :

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

["data1","data2","data3"];

qui ressemble plus à un typage array et non json du moins je pense, mais je suis pas expert non plus lol

une chose à vérifier, l'encodage du fichier si c'est en brut, ou l'encodage de caractère (utf8, Ainsi, etc...) le json retourner par ton php doit être en utf8

exemple :

Code PHP :

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

1
2
3
4
$a = array('key1'=>utf8_encode('val1'), 'key2'=>utf8_encode('val2'), 'key3'=>utf8_encode('val3'));
echo json_encode($a);
// Affiche
// { 'key1' : 'val1', 'key2' : 'val2', 'key3' : 'val3' }

pour json_encode voir le manuel

Peut-être des pistes à suivre

[danielhagnoul]

Bonsoir

Le format JSON, jQuery est très strict, exige des doubles " : { "key1" : "val1", "key2" : "val2", "key3" : "val3" }.

Les méthodes AJAX de jQuery travaille toujours en "utf-8".

[Aoernis]

Ce n'était effectivement, ni plus, ni moins qu'un bête problème de format et d'encodage.
Du coup le JS plantais sournoisement.

Au passage, et cas ou quelqu'un d'inexpérimenté tomberai sur ce topic,
j'en profite pour linker ce site qui m'a été bien utile pour trouver l'anguille sous roche :
http://jsonlint.com/