typeahead.js, localStorage i duży plik json

Question

Mam plik json, który ma rozmiar 1MB. starałem się wdrożyć typeahead.js prostego przykładu jak ten:

<div class="container"> 
    <p class="example-description">Prefetches data, stores it in localStorage, and searches it on the client: </p> 
    <input id="my-input" class="typeahead" type="text" placeholder="input a country name"> 
    </div> 

    <script type="text/javascript"> 
    // Waiting for the DOM ready... 
    $(function(){ 

     // applied typeahead to the text input box 
     $('#my-input').typeahead({ 
     name: 'products', 

     // data source 
     prefetch: '../php/products.json', 

     // max item numbers list in the dropdown 
     limit: 10 
     }); 

    }); 
    </script> 

Ale kiedy go uruchomić chrom mówi:

Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of '__products__itemHash' exceeded the quota.

Co mogę zrobić? Używam atrybutu typeahead.min.js

Answer 1

Widzisz ten błąd, ponieważ prefetch z wyprzedzeniem pobiera za pomocą localStorage dane.

Firstly, storing 1MB of data on the client side is not really good in term of user experience.

Biorąc to pod uwagę, nadal można rozwiązać problem z wieloma zestawami danych. To tylko obejście i może nie być najbardziej eleganckim rozwiązaniem, ale działa idealnie.

Dane próbka I testowane było> 1MB i wygląda to

można zobaczyć próbkę here (zajmuje trochę czasu, aby otworzyć)

Procedura:

1. Najpierw pobierz wszystkie dane, używając $.getJSON
2. The n podzieliłem dane na kawałki o wielkości 10.000 (tylko magiczna liczba, która zadziałała dla mnie w różnych przeglądarkach. Znajdź swoje)
3. Utworzono zestawy ogarów dla każdego kawałka i przechowywano wszystko w tablicy.
4. Następnie zainicjowania wpisywanie znaków z wyprzedzeniem z tej tablicy

Kod:

$.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 
} 

stworzyłem demo here z 20 elementów i chunkSize 2 po prostu pokazać, jak wiele-zestawy danych na ogół działają. (Wyszukaj Seana lub Benjamina)

Mam nadzieję, że to pomoże.