Javascript 如何将自定义图像添加到typeahead下拉菜单？

下拉列表是从远程表填充的，该表还包含相应图像的url。我正在使用typeahead 0.9.3。可以使用什么方法将自定义图像添加到自动完成中

<?php

$dbh = new PDO('mysql:host=localhost;dbname=****', 'root', '*****');

$query ='%'.$_GET['query'].'%';

$stmt = $dbh->prepare("SELECT event FROM events WHERE event LIKE :query");

$stmt->bindParam(':query', $query, PDO::PARAM_STR);
$stmt->execute();

$results = array();

foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
    $results[] = $row;
}

echo json_encode($results);

?>

---

您必须在typeahead初始化中添加一个

模板

选项。 模板必须使用hogan作为渲染引擎，以替换远程值的img源

例如，如果远程查询返回如下所示的JSON对象：

{"value":"test","img":"url to image"}

您必须以这种方式配置typeahead：

$input.typeahead({
   name: "autocomplete",
   template: "{{value}}<img src='{{img}}'/>",
   engine: Hogan,
   remote: "/remoteUrlToFill?q=%QUERY"
});

$input.typeahead({
名称：“自动完成”，
模板：“{value}}”，
引擎：霍根，
远程：“/remoteUrlToFill？q=%QUERY”
});

我创建了一个简单的JSFIDLE来测试这一点（请参见javascript区域末尾的自定义代码）：

---

我没有使用远程源，而是使用了本地json对象，但是如果您的远程响应看起来像本地对象，那么这一定不会是一个问题。谢谢你的回复。{{value}}是什么占位符？我会试试看，让你知道！抱歉，我的示例JSON不正确。{{value}}在响应json object.Hi中呈现“value”。谢谢你的帮助。我的下拉列表只显示undefined，这意味着我的php查询有问题。我不知道如何修改现有的一个，以获得正确的输出。你能看一下吗？假设我也需要从事件表中选择“ID”。如何修改返回的$results？我将代码添加到问题中以使其可读。嗯，您需要在typeahead结果中使用“ID”和“event”值否？如果此值存在于JSON响应对象中，则可以使用正确的占位符在hogan模板中呈现它