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

【问题标题】：How can I add custom image to typeahead drop-down menu?如何将自定义图像添加到 typeahead 下拉菜单？
【发布时间】：2014-07-14 07:31:36
【问题描述】：

下拉列表是从一个远程表中填充的，该表还包含相应图像的 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);

?>

【问题讨论】：

标签： javascript jquery typeahead.js

【解决方案1】：

您必须在预输入初始化中添加template 选项。您的模板必须使用 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"
});

我创建了一个简单的 jsfiddle 来测试它（请参阅 javascript 区域的末尾以查看自定义代码）：

http://jsfiddle.net/vfportero/KJFje/1/

我使用本地 json 对象而不是远程源，但如果您的远程响应看起来像本地对象，这一定不是问题

【讨论】：

嘿。感谢您的回复。 {{value}} 占位符是做什么用的？我会试试这个，让你知道！
抱歉，我的 JSON 示例不正确。 {{value}} 在响应 json 对象中呈现“值”。
嗨。谢谢您的帮助。我的下拉菜单只显示未定义，这意味着我的 php 查询有问题。我不确定如何修改现有的以获得正确的输出。你能看看吗？
假设我还需要从事件表中选择“ID”。如何修改返回的 $results？我将代码添加到问题中以使其可读。
嗯，您需要预先输入结果中的“ID”和“事件”值，不是吗？这个值是否存在于您的 JSON 响应对象中，您可以使用正确的占位符在您的 hogan 模板中呈现它