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

Question

The drop-down is populated from a remote table which also contains the url of the corresponding image. I am using typeahead 0.9.3. What method can be used to add custom images to the autocomplete?

<?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

You have to add a template option to your typeahead initialization. You template must use hogan as rendering engine to replace the img source for your remote value.

For example, if you remote query returns a JSON object like this:

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

You must to configure typeahead this way:

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

I've created a straightforward jsfiddle to test this (see at the end of the javascript area to see the custom code):

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

Instead of remote source I used a local json object but this mustn't be a problem if your remote response looks like the local object