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 .