2016-04-05 27 views
0

Verileri dinamik olarak (kullanıcı türleri) veritabanımdan getirmem gerekiyor. typeahead örneklerine bakmayı denedim, ancak uzaktan uygulamayı nasıl uygulayabileceğimi anlamıyorum. Uzak bir komut dosyasından veri alma

<div id="remote"> 
    <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture"> 
</div> 

$('#the-basics .typeahead').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     name: 'states', 
     source: substringMatcher(states) 
    }); 

Bu

yerel olarak temsil edilmeyecektir diziyi states gerektirir. Ama veriyi sunucu tarafımdan almam gerekiyor. Bunu nasıl yapabilirim?

+0

örneğini denemelisiniz - https://twitter.github.io/typeahead.js/examples/#remote – Dekay

+0

@Dekay Buradaki kaynak: bestPictures' nedir? –

+0

bu bir "Bloodhound" nesnesini yaratan yukarıdaki değişkenin adıdır ... bu "Bloodhound" nesnesi verilerinize nasıl erişileceğini açıklar – Dekay

cevap

0

Uzak veri kaynağını kullanmak için, tarak motorunu da kullanmanız önerilir.

Uzak seçeneğini ayarlayarak, sizin kan tazısı örneğini tanımlamak isteyeceksiniz

:

var urlRoot = '//jsonplaceholder.typicode.com'; 
var todos = { 
    url: urlRoot + '/todos', 
    prepare: function(query, settings) { 
    settings.url += '?q=' + query; 
    return settings; 
    }, 
    filter: function(data) { 
    return $.map(data, function(object) { 
     return { 
      Id: object.id, 
      Value: object.title 
     }; 
    }); 
    } 
}; 
: my uzak kaynağının yapılandırmasını tutan Bir options karma oluşturduk Bu durumda

var taSource = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    identify: function(obj) { 
    return obj.Value; 
    }, 
    remote: todos 
}); 

,

Burada, uzak kaynağımın URL'sini, sorgunun nasıl işleneceğini ve veriyi yazım başlığına göre nasıl iade edeceğimi tanımlarım. Benim kan tazısı örneği tanımladıktan sonra

, o zaman başlatılamıyor:

taSource.initialize(true);

Sonra kan tazısı örneği kullanmak benim typeahead nesneyi tanımlamak: Burada

$('#search-input').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 3 
}, { 
    name: 'myMatches', 
    source: taSource, 
    display: 'Value' 
}); 

a link to a jsFiddle temel sergiliyor uzak kaynakların kullanımı.

İlgili konular