2014-04-07 19 views
5
benim Otomatik öneriler için Typeahead.js kullanıyorum

oluşturulan JSON'umda tokens'u kullanabilir ve Bloodhound'daki jetonları temel alarak sonuçları geri bırakabilir.Typeahead.js getirilmeyen dinamik php benim kodudur, JSON

Her zaman db'ye eklenen öneri öğelerine sahip olduğum için yalnızca statik JSON oluşturamıyorum.

Json'u dinamik olarak önceden getirmenin bir yolu var mı?

+0

Cevabın yardımında bulundu. Problemini çözdün mü? –

cevap

1

prefetch kullanarak bir Typeahead örneği yazdım. Bu örnek, uzak bir kaynaktan JSON verileri alır şöyledir:

http://jsfiddle.net/Fresh/1hrk0qso/

uzak bir kaynaktan JSON önceden getirmek için, Bloodhound nesne uygulandı:

var countries = new Bloodhound({ 
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
queryTokenizer: Bloodhound.tokenizers.whitespace, 
prefetch: { 
url: 'https://cdn.rawgit.com/twitter/typeahead.js/gh-pages/data/countries.json', 
    filter: function (countries) { 
     return $.map(countries, function (country) { 
      return { 
       name: country 
      }; 
     }); 
    } 
} 
}); 

Bir URL'yi yerini alacak Dinamik olarak oluşturulmuş JSON'unuzu döndüren bir URL ile statik JSON dosyası (yukarıdaki kodda gösterilmiştir).

Buradaki anahtar kodu, düz JSON kodlarını, Typeahead'in çalışması gereken şey olan bir dizi Javascript nesnesine eşleyen "filtre" işlevidir.

1

Dokümanlardan: "Daha küçük veri kümeleriyle bunlardan kurtulmak mümkün olsa da, önceden getirilen verilerin tüm veri kümelerini içermesi amaçlanmaz. Aksine, öneri için ilk düzey bir önbellek işlevi görmesi gerekir. Bu uyarıyı aklınızdan çıkarmayın, yerel depolama limitlerine çarpma riskini siz de üstleneceksiniz. "

https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#prefetch

Ne alıyorsanız ne kadar veri bilmiyorum ama veri almak ve sonra yanıt almak zaman Bloodhound örneğine içine yüklemek için bir ajax arama yapmak için daha iyi olabilir. Bu yardımcı olur

//Let's assume that the data you get back from the server is an array of objects 
//data = [{value: 'a'}, {value: 'b'}, {value: 'c'}]; 

$.get("http://example.com/your-data", function(data) { 
    var bh = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: data 
    }); 

    var dataset = { 
    name: "My-dataset-name", 
    displayKey: "value", 
    source: bh.ttAdapter() 
    }; 

    var ta = $(".typeahead").eq(0).typeahead(
    { 
     hint: true 
     highlight: true 
     minLength: 1 
    }, 
    datasetStates 
    ); 
    ta.on('typeahead:selected', someFunctionToHandleEvent); 
}); 

Umut:

İşte jQuery ajax çağrısı kullanarak bir örnektir.