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

您必须为先行初始化添加template选项。您的模板必须使用hogan作为渲染引擎来替换远程值的img源。

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

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

您必须以这种方式配置预先输入：

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

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

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

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

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

1 个答案: