Auto complétion ne s'affiche pas

Bonjour,
J'essaie de mettre en place une recherche avec auto complétion.

Je n'y connais rien en JS j'appends toujours la php et je veux pas me perdre à apprendre plusieurs langage en même temps.

Dans ma console de débogage de FF j'ai bien un retour json qui ressemble au code ci-dessous, mais il a rien qui s'affiche au niveau de mon input pour l'autocomplétion.

Code:

[{"nom":"la beaut\u00e9"},{"nom":"le paris"},{"nom":"le vertige"}]

je vous laisse mon code

logement.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function logement(){
  $bdd = db_connect();
 
if(isset($_GET['query']) && !empty($_GET['query'])){
 
  $sql = "SELECT nom FROM logements WHERE nom LIKE :nom";
  $req = $bdd->prepare($sql);
  $req->bindValue('nom', (isset($_GET['query']) ?  '%' .$_GET['query'] . '%' : "" ), PDO::PARAM_STR);
  $req->execute();
  $result = $req->fetchAll(PDO::FETCH_OBJ);
  $req->closeCursor();
 
   echo json_encode($result);
      }
    }
logement();

custom.js

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
$(document).ready(function() {
 
var data = new Bloodhound({
           datumTokenizer: function (datum) {
                return Bloodhound.tokenizers.whitespace(datum.nom);
            },
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          remote: {
            url : "logement.php?query=%QUERY", 
            wildcard : "%QUERY"
            },
        });
data.initialize();
$('#search').typeahead({
          hint: false,
          highlight: true,
          minLength: 1
        },
        {
          name: "data",   
          displayKey: "nom",
          source: data.ttAdapter(),
          limit:5,
 
        });
});