You are seeing that error because typeahead prefetch uses localStorage to store the data.
Firstly, storing 1MB of data on the client side is not really good in term of user experience.
Given that, you can still solve the problem with multiple-datasets. This is just a workaround and may not be the most elegant solution but it works perfectly.
The sample data I tested with was >1MB and looks like this
You can view the sample here (It takes a while to open)
Procedure:
- First download the entire data using
$.getJSON
- Then split the data into chunks of 10,000 (just a magical number that worked for me across browsers. Find yours)
- Created sets of bloodhounds for each chunk and store everything in an array.
- Then initialize typeahead with that array
Code:
$.getJSON('data.json').done(function(data) { // download the entire data
var dataSources = [];
var data = data['friends'];
var i, j, data, chunkSize = 10000; // break the data into chunks of 10,000
for (i = 0, j = data.length; i < j; i += chunkSize) {
tempArray = data.slice(i, i + chunkSize);
var d = $.map(tempArray, function(item) {
return {
item: item
};
});
dataSources.push(getDataSources(d)); // push each bloodhound to dataSources array
}
initTypeahead(dataSources); // initialize typeahead
});
function getDataSources(data) {
var dataset = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('item'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data,
limit: 1 // limited each dataset to 1 because with 76,000 items I have 8 chunks and each chunk gives me 1. So overall suggestion length was 8
});
dataset.initialize();
var src = {
displayKey: 'item',
source: dataset.ttAdapter(),
}
return src;
}
function initTypeahead(data) {
$('.typeahead').typeahead({
highlight: true
}, data); // here is where you use the array of bloodhounds
}
I created a demo here with 20 items and chunkSize of 2 just to show how multiple-datasets would generally work. (Search for Sean or Benjamin)
Hope this helps.