typeahead.js, localStorage e file json grande

Question

Ho un file json che ha una dimensione di 1Mb. ho cercato di implementare typeahead.js con un semplice esempio come questo:

<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> 

Ma quando lo lancio dice chrome:

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

Cosa posso fare? Sto usando typeahead.min.js

Answer 1

Si sta verificando quell'errore perché la prefetch typeahead utilizza localStorage per memorizzare i dati.

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

Dato che, è ancora possibile risolvere il problema con più dataset. Questa è solo una soluzione e potrebbe non essere la soluzione più elegante ma funziona perfettamente.

I dati di esempio ho provato con era> 1 MB e si presenta così

È possibile visualizzare il campione here (Ci vuole un po 'per aprire)

Procedura:

1. Prima scaricare l'intero dato utilizzando $.getJSON
2. Il n dividere i dati in blocchi di 10.000 (solo un numero magico che ha funzionato per me attraverso i browser. Trova il tuo)
3. Crea gruppi di bloodhound per ogni blocco e archivia tutto in un array.
4. Poi inizializzare typeahead con tale matrice

Codice:

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

ho creato una demo here con 20 elementi e chunksize di 2 solo per mostrare come multiple-set di dati sarebbero in generale lavorare. (Cerca Sean o Benjamin)

Spero che questo aiuti.