Typeahead.js et les données JSON du fichier PHP

Question

J'essaie de renvoyer certains produits dans un champ de saisie avec la classe définie sur typeahead. J'ai actuellement une page php que j'ai faite pour interroger la base de données et retourner les résultats via JSON. Quand je fais écho la réponse que je reçois le texte suivant:

[ 
{ 
    "id": "97", 
    "Product": "Amazon Fire TV", 
    "Description": "Amazon - Fire TV Streaming Device - Black" 
}, 
{ 
    "id": "98", 
    "Product": "Amazon Aurum Ultra Series - High Speed HDMI Cable (100 Ft) With Ethernet - Supports 3D", 
    "Description": "High Speed HDMI Cable With Ethernet - Supports 3D & Audio Return Channel" 
}, 
{ 
    "id": "99", 
    "Product": "Amazon Eco Dot", 
    "Description": "Amazon Eco Dot" 
}, 
{ 
    "id": "100", 
    "Product": "Amazon Fire TV", 
    "Description": "Amazon Fire TV" 
}, 
{ 
    "id": "101", 
    "Product": "Amazon Linear 5445 ChannelPlus Four-Channel Video Modulator", 
    "Description": "Four-Channel Video Modulator" 
}, 
{ 
    "id": "102", 
    "Product": "Amazon Pyle PCM20A 40 Watts Power Amplifier with 25 and 70 Volt Output", 
    "Description": "70 Volt Power Amplifier with 400 Watts" 
} 
] 

La question que j'ai est que ma boîte d'entrée typeahead n'affiche pas ces données. Voici le code que j'ai pour cette section dans ma section head de la page HTML.

<script> 
    $(document).ready(function() { 
     var Product = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: '/includes/estimate-search.php?query=%QUERY', 
      wildcard: '%QUERY' 
     } 
     }); 

    $('.typeahead').typeahead(null, { 
     name: 'Product', 
     source: Product 
    }); 
    }); 
</script> 

Mon code PHP pour analyser les résultats sont les suivants:

<?php 
require_once('../database/connection.php'); 

$query = $_GET['query']; // add % for LIKE query later 

// do query 
$stmt = $pdo->prepare("SELECT `id`, `Product`, `Description` FROM `products` WHERE `Product` LIKE '%".$query."%'"); 
$stmt->bindParam(':query', $query, PDO::PARAM_STR); 
$stmt->execute(); 

// populate results 
$results = array(); 
foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) { 
    $results[] = array('id' => $row['id'], 'Product' => $row['Product'], 'Description' => $row['Description']); 
} 

// and return to typeahead 
header('Content-type: application/json'); 
echo json_encode($results, JSON_PRETTY_PRINT); 
return json_encode($results); 
?> 

Qu'est-ce que je manque qui cause les résultats ne sont pas affichés par le api typeahead? Merci d'avance pour votre aide!

Answer 1

a dû changer à ce qui suit pour le faire fonctionner:

fichier PHP:

<?php 
require_once('../database/connection.php'); 
$query = $_GET['query']; 
$result = array(); 
$stmt = $pdo->prepare("SELECT `Product` FROM `products` WHERE `Product` LIKE :query"); 
$stmt->bindValue(':query', '%' . $query . '%'); 
$stmt->execute(); 

foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) { 
    $result[] = array('Product' => $row["Product"]); 
} 
echo json_encode($result); 
?> 

fichier Head Script:

<script> 
$(document).ready(function() { 
     var Product = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.whitespace('Product'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: '/includes/estimate-search.php?query=%QUERY', 
      wildcard: '%QUERY' 
     } 
     }); 

    $('.typeahead').typeahead(null, { 
     name: 'product-search', 
     display: 'Product', 
     source: Product.ttAdapter() 
    }); 
    }); 
</script>