Question

所以我想使用typehead.js来创建一个自动填充字段（http://twitter.github.io/typeahead.js/）：

   $(document).ready(function() {

    var result;


        var result = new Bloodhound({
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.Domain.domain); },
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          limit: 10,
          prefetch: {
            url: 'data.json'
          }
        });


    result.initialize();

    $('.example-twitter-oss .typeahead').typeahead(null, {
      name: 'twitter-oss',
      displayKey: 'Domain.domain',
      source: result.ttAdapter(),
      templates: {
        suggestion: Handlebars.compile([
          '<p class="repo-language">Class {{Domain.class}}</p>',
          '<p class="repo-name"><img src="http://www.google.com/s2/favicons?domain={{Domain.domain}}" alt=""> {{Domain.domain}}</p>',
          '<p class="repo-description">{{Domain.company}}</p>'
        ].join(''))
      }
    });


    });

这是我的数据来源：

[
   {
      "Domain":{
         "domain":"duckduckgo.com",
         "company":"DuckDuckGo, Inc.",
         "category":"0"
      }
   },
   {
      "Domain":{
         "domain":"twitter.com",
         "company":"Twitter, Inc.",
         "category":"0"
      }
   },
   {
      "Domain":{
         "domain":"apple.com",
         "company":"Apple, Inc.",
         "category":"0"
      }
   }
]

似乎下拉菜单工作正常，但输入字段没有预测显示（我的意思是你开始输入“Twi”它不会显示为灰色“tter”）。

关于如何解决这个问题的任何想法？

Answer 1

您的显示键不正确。 typeahead.js不会解析您的密钥，并且知道它需要访问嵌套对象。相反，为了实现您想要的功能，请执行以下操作：

$('.example-twitter-oss .typeahead').typeahead(null, {
  // ...
  displayKey: function(o) { return o.Domain.domain; }
  // ...
});

使用typeahead.js进行自动填充预测不起作用

1 个答案: