typeahead.js 的自动完成预测不起作用答案

【问题标题】：Autocomplete prediction with typehead.js does not worktypeahead.js 的自动完成预测不起作用
【发布时间】：2014-03-10 14:44:47
【问题描述】：

所以我想使用 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”）。

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

【问题讨论】：

您是否包含了 css 文件？
这是我使用的 CSS 文件：twitter.github.io/typeahead.js/css/examples.css
将您的与 typeahead.js 示例进行比较，我认为您的 css 会覆盖 tt-hint
没有其他css，类完全一样。我不明白。
右键元素查看chrome devtool右侧样式，查看列表，是否一样。

标签： javascript jquery typeahead.js

【解决方案1】：

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

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

【讨论】：