来自 PHP 文件的 Typeahead.js 和 JSON 数据答案

【问题标题】：Typeahead.js and JSON data from PHP file来自 PHP 文件的 Typeahead.js 和 JSON 数据
【发布时间】：2017-08-09 16:39:18
【问题描述】：

我正在尝试将一些产品返回到类设置为预先输入的输入字段。我目前有一个 php 页面，用于查询数据库并通过 JSON 返回结果。当我回显响应时，我得到以下信息：

[
{
    "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"
}
]

我遇到的问题是我的预先输入框没有显示此数据。这是我在 HTML 页面的 head 部分中的该部分的代码。

<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>

我解析结果的PHP代码如下：

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

我遗漏了什么导致 typeahead api 不显示结果？提前感谢您的帮助！

【问题讨论】：

对于初学者，错误处理和日志条目。
您正在回显并返回 json 编码结果。它是错误还是功能？但这似乎不是你失败的原因……
我只是让它回显，所以我可以确保我得到了预期的结果。

标签： php json typeahead.js

【解决方案1】：

必须更改为以下内容才能使其工作：

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

头脚本文件：

<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>

【讨论】：