javascript - 如何将自定义图像添加到预输入下拉菜单中？

Question

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

?>

Answer 1

您必须在预输入初始化中添加一个模板 选项。您的模板必须使用 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 对象而不是远程源，但如果您的远程响应看起来像本地对象，这一定不是问题