typeahead.js
typeahead.js copied to clipboard
twitter
typeahead alwas shows empty template although data returned from server in right json format
...i have the same problem!! anyone have any thoughts?
specifically, i've got a typeahead object whose source is a search function that outputs some JSON. I've verified that the JSON is correct by logging it to the console. Yet still, my typeahead always shows up with the "empty" template!!
function search(query, cb)
{
// get places matching query (asynchronously)
var parameters = {
geo: query
};
$.getJSON("search.php", parameters)
.done(function(data, textStatus, jqXHR) {
// call typeahead's callback with search results (i.e., places). JSON definitely worked!!
console.log(data);
console.log(jqXHR.responseText);
cb(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
// log error to browser's console
console.log(errorThrown.toString());
});
}
$(".typeahead").typeahead({
autoselect: true,
highlight: true,
minLength: 1,
limit: 10,
},
{
source: search,
templates: {
// empty always shows up...
empty: "no places found yet",
// and "suggestion" never does, even though my source function works fine!!
suggestion: function(data) {
return '<p>' + data.placename + data.address + '</p>';
}
}
});
+1 the configuration works well with some litter combinations and fails with others although bloodhound is returning correct json ( tested in console)
Hi today I had this problem and for me it was caused because I was using a custom object, so I debuged the js file and found that I should have a property "display" on my object (you probably can set this on the config which display field would be).
My souce that works is this:
...
source: {
contact: {
ajax: function (query) {
return {
type: "GET",
url: "/search/contact",
contentType: "application/json",
dataType:"json",
data: {
q: "{{query}}"
},
callback: {
done: function (data) {
return data.contacts.map((item) => {
return {
display : item.contactname,
value: item
}
});
}
}
}
}
}
},
...
Hope it can help :)
solved it. don't know where exactly but there is some bad math that checks limit vs returned data set size - if you have for example 1-2 items or 14 items, it works like a charm, but 5 - no typeahead:render fires with items that have arrived (nor the typeahead:asyncreceived to mark end of async call). even worse, if you limit your source data to say 10, and set the limit to 10+1 thinking that solves the bug - no cigar! the safest thing to do is to double it up - set limit to 2*whatever limit you have on your data set, and then code your source data set to stop producing once it hits the limit.
it'd be nice if somebody digs through the code and finds the genius math that managed to mess this up. all this confirmed in 0.11.1
Googled the "typeahead empty" and arrives at this issue, thanks for the quickfix
