web-dev-qa-db-ja.com

Typeahead.jsでリモートを設定するにはどうすればよいですか？

以前のバージョンでは次のことができました。

$('#search').typeahead({
  name: 'Search',
  remote: '/search?query=%QUERY'
});

しかし、0.10更新、typeahead.jsはsourceを定義するように求めています。データセット関数を定義せずにリモートを定義するにはどうすればよいですか？

javascriptautocompleteremote-servertypeaheadtypeahead.js
41
Zuhaib Ali

Typeahead.js バージョン0.10.0では、提案データを提供するために提案エンジンと呼ばれる別のコンポーネントが使用されるようになりました。 Typeahead.jsに同梱されている提案エンジンは、 Bloodhound と呼ばれます。

したがって、「データセット関数を定義せずにリモートを定義」することはできません。

リモートデータソースを使用したこの例（TheMovieDb APIを照会しています。たとえば、「エイリアン」を検索してみてください）は、次の場所にあります。

http://jsfiddle.net/Fresh/UkB7u/

コードは次のとおりです。

// Instantiate the Bloodhound suggestion engine
var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies.results, function (movie) {
                return {
                    value: movie.original_title
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    // Use 'value' as the displayKey because the filter function 
    // returns suggestions in a javascript object with a variable called 'value'
    displayKey: 'value',
    source: movies.ttAdapter()
});

フィルター関数を使用すると、重要なJSONデータソースから先読み候補として使用するものを選択できることに注意してください。

Typeahead 0.11.1の更新

新しいバージョンのtypeaheadを使用している場合は、元の質問に基づいた実例がここにあります。

http://jsfiddle.net/Fresh/bbzt9hcr/

Typeahead 0.10.0に関して、新しいバージョン（0.11.1）には次の違いがあります。

  • 「フィルター」機能の名前は「変換」に変更されました。
  • Bloodhoundオブジェクトでinitializeを呼び出す必要も、リモートソースに割り当てるときにttAdapter（）を呼び出す必要もありません。
  • 次に、リモートオプションハッシュ内でワイルドカード（例：％QUERY）を指定する必要があります。
96
Ben Smith

次のようなことができます：

$('input#keywords').typeahead({
    highlight: true,
},
{
  name: 'brands',
  display: 'value',
  source: function(query, syncResults, asyncResults) {
    $.get('/search?q=' + query, function(data) {
      asyncResults(data);
    });
  }
})

ソース： BloodhoundなしでTypeahead.jsを使用

21
Aqabawe

Ajax POST dataの代わりに、より制御されたajax呼び出しのデータを取得したい場合は、次の構造を使用できます。

var meslekler = new Bloodhound({
    datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.isim);
        },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'my_url_with_or_without_%query_token.php',
        ajax:{
            type:"POST",
            cache:false,
            data:{
                limit:5
            },
            beforeSend:function(jqXHR,settings){
                settings.data+="&q="+$('.tt-input').typeahead('val');
            },
            complete:function(jqXHR,textStatus){
            meslekler.clearRemoteCache();
            }
        }
    }
});
meslekler.initialize();
$('.typeahead').typeahead(null, {
    name:'meslekler',
    displayKey: 'isim',
    source: meslekler.ttAdapter()
});
9
MERT DOĞAN