typeahead.js, localStorage ve büyük json Dosya

Question

Bir json dosyası wich 1Mb bir büyüklüğe sahiptir var. Böyle basit bir örnekle typeahead.js uygulamaya çalışmıştır:

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

Ama başlatacak zaman krom diyor ki:

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

Ne yapabilirim? Ben typeahead.min.js

Answer 1

typeahead önceden getirme verileri depolamak için localStorage kullandığından O hatayı görüyoruz kullanıyorum.

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

Bu durumda, sorunu birden çok veri kümesiyle çözebilirsiniz. Bu sadece bir çözümdür ve en zarif çözüm olmayabilir, ancak mükemmel çalışır.

Ben ile test numune verileri> 1MB ve Sen numuneyi here (O açmak için bir süre alır) görüntüleyebilir bu

benziyor

Prosedür:

$.getJSON
1. kULLANAN
2. İlk indir bütün veri Verileri 10,000 parçaya bölebilirsiniz (sadece tarayıcılar arasında benim için çalışan sihirli bir numara). seninkini) her parça için bloodhounds ait
3. düzenlendi setleri bulun ve bir dizideki her şeyi saklayın.
4. Sonra bu dizi typeahead başlatmak

Kodu:

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

Sadece çoklu-veri kümeleri işe genelde nasıl göstermek için 20 maddeden ve 2 ChunkSize ile bir demo here yarattı. Bu yardımcı olur

Umut (Sean veya Benjamin ara).