-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom template without Handlebars #1031
Comments
thanks! |
This was really useful. The core library should use this as the default templating example instead of tacking 20 KB on for Handlebars. For reference, in case that pastebin ever dies: templates: {
suggestion: function (data) {
return '<p><strong>' + data.value + '</strong> - ' + data.year + '</p>';
}
}
// Use this format for JSON:
// https://twitter.github.io/typeahead.js/data/films/post_1960.json |
👍 |
How do you access |
I only tested using the example data, but try this to see exactly what's in the suggestion: function (data) {
console.log(data);
} |
It turns out typeahead doesn't like JSON names with an underscore. So |
This was a great help @brendanfalkowski Thanks for directly including the code !! Ur the man |
Just a note, with the new 0.11 version, this only works if you wrap everything in |
related to #2119 Turns out Handlebars isn't needed for custom templates: twitter/typeahead.js#1031
@razvanphp I foud this issue searching for confirmation to the same. The returned HTML gets converted to a DOM node, so any non-valid text screws it up.. dunno if its intentional, but smells buggy to me. |
what if i have an array within the data ? how i can deal with it ?
|
@PierBover thx 👍 😄 |
@hala3amme you should be able form a string from that array and simply return that. |
Workaround for footer. It took me hours to figure out. I could have fixed it if I were to see this post first: $.ajax({
dataType: "json",
url: "../model/json_db/formats.php"})
.done( function(data) {
/* $.each(data,function(i,v){
console.log(v.format);
$.each(v,function(i,va){
console.log(va);
})
});
$.map(data, function(obj) {
console.log(obj.format + "example" + obj.format_example);
}); http://forum.jquery.com/topic/jquery-and-json-troubles */
// constructs the suggestion engine
var engine = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `data` is an array of country names defined in "The Basics"
local: $.map(data, function(obj) {
return { value : obj.format, eg: obj.format_example };
}),
limit: 10
});
// kicks off the loading/processing of `local` and `prefetch`
engine.initialize();
$('#scrollable-dropdown-menu .typeahead').typeahead(null, {
name: 'data',
displayKey: 'value',
hint: true,
highlight: true,
minLength: 1,
source: engine.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'Result not found',
'</div>'
].join('\n'),
suggestion: Handlebars.compile("<div style='padding:6px'><b>{{value}}</b> - example : {{eg}} </div>"),
// footer: "<b>Searched for "+ console.log($('input.typeahead.tt-input').val()+"</b>"
footer: function (data) {
// return Handlebars.compile("<b>Searched for {{data.query}} </b>")
return '<div>Searched for <strong>' + data.query + '</strong></div>';
}
}
}); |
I could still use normal callback func to return suggestion but I decide to leave it there for now. Feel free to give your input. |
Hi
how to custom template without handlebars dep?
thanks
The text was updated successfully, but these errors were encountered: