jquery - Plantilla personalizada Typeahead sin manillares

typeahead.js

Question

Estoy intentando implementar el ejemplo de "Plantilla personalizada" de 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>'')
  }
});

Específicamente esta línea:

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

Inicialmente, no me di cuenta de que debía requerir explícitamente a Handlebars como una dependencia:

Uncaught ReferenceError: Handlebars is not defined

Cuando quito los manillares ...

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

Da otro error de JS:

Uncaught ReferenceError: value is not defined

¿Es posible usar una plantilla de vista personalizada sin usar el motor de manillares?

Answer 1

Esto podría ayudar - lo he integrado con 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>'';
    }
  }
});

Answer 2

Utilice este formato:

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

Tomado de este hilo .