Question

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

    <button md-raised-button  [mdMenuTriggerFor]="menu">Add To</button>
    <md-menu #menu="mdMenu">
      <button md-menu-item>Item 1</button>
      <button md-menu-item>Item 2</button>
      <md-input-container class="mx-4">
        <input mdInput placeholder="Create new" value="">
      </md-input-container>
    </md-menu>

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

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

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

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

我错过了什么导致结果不被typeahead api显示？在此先感谢您的帮助！

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

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

1 个答案: