web-dev-qa-db-ja.com

TypeaheadとBloodhound-JSONの結果を取得する方法

国のjsonリストがあります： http://vocab.nic.in/rest.php/country/json

そして、Bloodhound提案エンジンでcountry_idとcountry nameを取得しようとしています。 Oは次のコードを試しました：

var countries = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country_name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: 'http://vocab.nic.in/rest.php/country/json',
        filter: function(response) {
            return response.countries;
        }
    }
});

$('#my-input').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        displayKey: 'value',
        source: countries.ttAdapter()
    });

これは機能しません。これを機能させるには、どのようにコードを変更する必要がありますか？

jqueryjsontypeahead.js
15
user1049961
// instantiate the bloodhound suggestion engine
var countries = new Bloodhound({  
  datumTokenizer: function(countries) {
      return Bloodhound.tokenizers.whitespace(countries.value);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: "http://vocab.nic.in/rest.php/country/json",
    filter: function(response) {      
      return response.countries;
    }
  }
});

// initialize the bloodhound suggestion engine
countries.initialize();

// instantiate the typeahead UI
$('.typeahead').typeahead(
  { hint: true,
    highlight: true,
    minLength: 1
  }, 
  {
  name: 'countries',
  displayKey: function(countries) {
    return countries.country.country_name;        
  },
  source: countries.ttAdapter()
});

Codepenの例

先読み出力

Output of Typeahead

ノート：

  • サーバー上のデータ=「プリフェッチ」。
  • 外部からのデータ=「リモート」
13
Jens A. Koch

注：これをすべて実行してもまだ動作しない場合は、data.jsonファイルを調べてください（名前を付けたものは何でも）

適切な形式の例： https://github.com/Twitter/typeahead.js/blob/gh-pages/data/countries.json

['data1'、 'data2'、.....]

私は場違いの引用につまずいた。

0
MD Nelles