没有把手的预输入自定义模板

Posted 2023-05-07

【中文标题】没有把手的预输入自定义模板

【英文标题】：Typeahead custom template Without Handlebars

【发布时间】：2015-05-27 05:25:39

【问题描述】：

我正在尝试实现 Typeahead.JS "Custom Template" example。

$('#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>';

取自this thread。

【参考方案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>';
    
  
);