Пользовательский шаблон Typeahead без ручек

Я пытаюсь реализовать пример Typeahead.JS "Пользовательский шаблон" .

$('#custom-templates .typeahead').typeahead(null, {
  name: 'best-pictures',
  displayKey: 'value',
  source: bestPictures.ttAdapter(),
  templates: {
    empty: [
      '<div class="empty-message">',
      'unable to find any Best Picture winners that match the current query',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<p><strong>{{value}}</strong> – {{year}}</p>')
  }
});

В частности, эта строка:

suggestion: Handlebars.compile('<p><strong>{{value}}</strong> – {{year}}</p>')

Вначале я не понимал, что вам нужно явно требовать Handlebars в качестве зависимости:

Uncaught ReferenceError: Handlebars is not defined

Когда я удаляю Handlebars...

suggestion: '<p><strong>' + value + '</strong> – ' + year + '</p>'

Он дает другую ошибку JS:

Uncaught ReferenceError: value is not defined

Можно ли использовать настраиваемый шаблон представления без использования механизма Handlebars?

Ответ 1

Используйте этот формат:

suggestion: function(data) {
    return '<p><strong>' + data.value + '</strong> – ' + data.year + '</p>';
}

Взято из этой темы.

Ответ 2

Это может помочь - я интегрировал его с Bootstrap:

<div class="col-lg-3" id="the-basics">
<input type="text" class="typeahead form-control" placeholder="my placeholder" aria-describedby="basic-addon1">
</div>

$('#the-basics .typeahead').typeahead(null, {
  name: 'best-pictures',
  display: 'imageUrl',
  source: function show(q, cb, cba) {
    console.log(q);
    var url = '/yoururl/'+q;
    $.ajax({ url: url })
    .done(function(res) {
      cba(res.list);;
    })
    .fail(function(err) {
      alert(err);
    });
  },
    limit:10,
  templates: {
    empty: [
      '<div class="empty-message">',
        'No data',
      '</div>'
    ].join('\n'),
    suggestion: function(data) {
      return '<p><strong>' + data.itemName + '</strong> - <img height:"50px" width:"50px" src='+data.imageUrl+'></p>';
    }
  }
});