如何將自定義圖像添加到預先輸入下拉菜單？

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"}

您必須以這種方式配置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對象而不是遠程源，但如果您的遠程響應看起來像本地對象，則這不應該是一個問題