リモートスクリプトからデータを取得する

Question

データベースからデータを動的にフェッチする必要があります。 typeahead の例を試してみましたが、リモート実装をどのように実装できるかわかりません。

<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) 
    }); 

これには、アレイstatesがローカルに存在する必要があります。しかし、私はサーバー側のスクリプトからデータを取得する必要があります。どうすればこのことができますか？

Answer 1

リモートデータソースを使用するには、bloodhoundエンジンも使用することをお勧めします。

リモートオプションの設定、あなたのブラッドハウンドのインスタンスを定義することになるでしょう：

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 
     }; 
    }); 
    } 
}; 

：私は私のリモートソースの設定を保持 optionsハッシュを作成しました。この例では

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

を

ここでは、リモートソースのURL、クエリの処理方法、先読みで消費するデータを返す方法を定義します。

私はブラッドハウンドインスタンスを定義したら、私はそれを初期化します。

​​

私はその後、ブラッドハウンドインスタンスを使用するために私の先行入力オブジェクトを定義します。ここでは

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

は、基本的に実証a link to a jsFiddleですリモートソースの使用。