I seem to have the same problem as Twitter Typeahead Ajax results undefined but that has gone unsolved, so I am asking again, hopefully I can provide some missing details.
I am using the standalone typeahead 0.10.2 along with bootstrap 2.3.1. Underscore is 1.6.0. Complete list of included libraries is:
<script src="/static/portal/js/jquery-1.9.1.min.js"></script>
<script src="/static/portal/js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="/static/portal/js/bootstrap.min.js"></script>
<script src="/static/portal/js/typeahead.bundle.min.js"></script>
<script src="/static/portal/js/hogan-2.0.0.min.js"></script>
<script src="/static/portal/js/underscore-min.js"></script>
For my first try, I modelled my script on http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead, and everything seems to work, right up to the call to process(). Rather than populating the autosuggest drop-down with my results, it only contains 'undefined' values (the right number of elements though).
$("#create_track").click(function() {
var names_id_map = {};
$('#ul_results').addClass('hide');
$('#create_track_form').removeClass('hide');
// use debounce from underscore.js to throttle requests to server
var suggestArtists = _.debounce(function(query, process) {
var artist_names = [];
$.get(ARTIST_NAMES_URL, { q: query }, function (data) {
// data = {"results": [{"id": "artist_123", "name": "xyz"}, ...]}
$.each(data, function (key, val) {
if (key == "results") {
$.each(val, function (i, item) {
artist_display = item.name + ' - ' + item.id;
artist_names.push(artist_display);
names_id_map[artist_display] = item.id;
});
}
});
process(artist_names);
});
}, 300); // rate limit requests to server
$("#artist_name").typeahead(null, {
name: 'artist-names',
minLength: 1,
source: function (query, process) {
suggestArtists(query, process);
},
updater: function (item) {
console.dir('updater: ' + item); // never output
$("#artist_id").val(names_id_map[item]);
// return value which should be selected in drop-down
// return item;
},
});
return false;
});
That particular tutorial may have been created for the old bootstrap-bundled version of typeahead. Using the documentation for the newer standalone version of typeahead, I came up with this, which behaves the same, resulting in a menu of the right number of undefineds:
$("#create_track").click(function() {
var names_id_map = {};
$('#ul_results').addClass('hide');
$('#create_track_form').removeClass('hide');
var artistNames = new Bloodhound({
name: 'artist-names',
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: ARTIST_NAMES_URL + '?q=%QUERY',
//rateLimitBy: debounce, // debounce is not defined?
rateLimitWait: 300,
filter: function(data) {
var artist_names = [];
// data = {"results": [{"id": "artist_123", "name": "xyz"}, ...]}
$.each(data, function (key, val) {
if (key == "results") {
$.each(val, function (i, item) {
artist_display = item.name + ' - ' + item.id;
artist_names.push(artist_display);
names_id_map[artist_display] = item.id;
});
}
});
return artist_names;
},
}
});
artistNames
.initialize()
.done(function() { console.log('artistNames init success'); });
$("#artist_name").typeahead(null, {
minLength: 1,
source: artistNames.ttAdapter(),
});
return false;
});
If I populate it with local data like this:
$("#create_track").click(function() {
var names_id_map = {};
$('#ul_results').addClass('hide');
$('#create_track_form').removeClass('hide');
var artistNames = new Bloodhound({
name: 'artist-names',
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: ["Abc", "Def", "Ghi", "Jkl"],
});
artistNames.initialize()
.done(function() { console.log('artistNames init success'); });
$("#artist_name").typeahead(null, {
minLength: 1,
source: artistNames.ttAdapter(),
});
return false;
})
I can type "a" or "d", for example, and get a single "undefined" suggestion. Typing "b", "c", or "z" gives no suggestion.
I've read just about everything I could find about typeahead on Google & SO over the last day. I am confident my JSON is decoded properly, and in all cases my artist_names is a native JS array of strings.