Modello personalizzato Typeahead senza manubri

Question

Sto cercando di implementare il 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>') 
    } 
}); 

In particolare questa linea:

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

Inizialmente non mi rendevo conto che devi richiedere esplicitamente Handlebars come una dipendenza:

Uncaught ReferenceError: Handlebars is not defined 

Quando rimuovo Manubrio ...

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

Esso dà es un altro errore JS:

Uncaught ReferenceError: value is not defined 

E 'possibile utilizzare un modello di visualizzazione personalizzata senza usare il motore manubrio?

Answer 1

Utilizzare questo formato:

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

Tratto da this thread.

Answer 2

Questo potrebbe aiutare - ho integrato 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>'; 
    } 
    } 
});