Typeahead benutzerdefinierte Vorlage ohne Lenker

Question

Ich versuche, die Typeahead.JS "Custom Template" example zu implementieren.

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

Insbesondere diese Zeile:

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

Am Anfang habe ich nicht erkennen, Sie explizit müssen benötigen Lenker als Abhängung:

Uncaught ReferenceError: Handlebars is not defined 

Wenn ich entfernen Lenker ...

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

It giv es ein anderer JS-Fehler:

Ist es möglich, eine benutzerdefinierte Ansichtsvorlage zu verwenden, ohne die Lenker-Engine zu verwenden?

Answer 1

Verwenden Sie dieses Format:

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

von this thread genommen.

Answer 2

Dies könnte helfen - ich habe mit Bootstrap integriert es:

<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>'; 
    } 
    } 
});