提前输入获取远程数据问题 - Typeahead get remote data issue

我的数据库中有一些产品，我使用了一个输入字段来搜索产品。我正在使用 Typeahead 搜索具有远程数据的产品。我的产品数据库是这样的

CREATE TABLE IF NOT EXISTS `products` (
  `id_product` int(10) unsigned NOT NULL,
  `name` varchar(128) NOT NULL,
  `desc` text,
  PRIMARY KEY (`id_product`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `products`
--
INSERT INTO `products` (`id_product`, `name`, `desc`) VALUES
(1,  'Apple', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2,  'Box ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2,  'Bat ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2,  'Cat ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2,  'Ant ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry');

带有js的html是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="js/typeahead.bundle.js"></script>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="jquery.typeahead.css">
<style>
.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}
.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
    color: #999
}
.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0097cf;
}
</style>
<script type='text/javascript'>
        //<![CDATA[ 
        $(window).load(function () {
            // instantiate the bloodhound suggestion engine
            var products = new Bloodhound({
                datumTokenizer: function (d) {
                    return Bloodhound.tokenizers.whitespace(d.value);
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: 'ajax.php?search_term=%QUERY',
                    filter: function (products) {
                        return $.map(products.results, function (product) {
                            return {
                                value: product.name
                            };
                        });
                    }
                }
            });
            // initialize the bloodhound suggestion engine
            products.initialize();
            // instantiate the typeahead UI
            $('.typeahead').typeahead(null, {
                displayKey: 'value',
                source: products.ttAdapter()
            });
        }); //]]>
    </script>   
</head>
<body>
    <input class='typeahead' placeholder='Find products...' type='text' />
</body>
</html>

在 ajax 中.php我像这样使用了我的自定义查询

$dsn = 'mysql:host=localhost; dbname=products';
$username = 'root';
$password = 'root';
$options = array(
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
); 
$dbh = new PDO($dsn, $username, $password, $options);
$query = $_REQUEST['search_term'];
$stmt = $dbh->prepare("SELECT name from `products` WHERE `name`  LIKE '%".$query."%' ");
$stmt->bindParam(':query', $query, PDO::PARAM_STR);
$stmt->execute();
// populate results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
    $results[] = $row;
}
print_r($results);
// and return to typeahead
echo json_encode($results);

这里它在数组中，我得到的产品名称是这样的

Array
(
    [0] => Bat
    [1] => Box
)

使用json我也在获取这样的数据

["Bat","Box"]

但我不知道为什么这些值没有出现在搜索下拉框中？任何帮助和建议都将非常可观。谢谢

注意在控制台中，我收到类似错误

Uncaught TypeError: Cannot read property 'length' of undefined

因为你的typehead js代码是

                filter: function (products) {
                    return $.map(products.results, function (product) {
                        return {
                            value: product.name
                        };
                    });
                }

即products.results.name您需要格式化您的 PHP 数组，以便它正确返回 JSON 对象

// populate results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
    //add to 'results' with array with key 'name'
    $results['results'][] = array('name'=>$row);
}
// and return to typeahead
echo json_encode($results);