jquery - typeahead.js 返回 "blank"数据集

Question

我的 Twitter 有点问题 typeAhead返回空白结果和官方文档也没有帮助。

我期待什么:

<div class="tt-suggestion tt-selectable">Warcraft II: Tides of Darkness</div>
...

发生了什么:

在输入字段中输入时，typeAhead 返回空 html，如下所示，列表会根据获取的结果数量进行填充，因此它正在工作

<div class="tt-suggestion tt-selectable"></div>
<div class="tt-suggestion tt-selectable"></div>
<div class="tt-suggestion tt-selectable"></div>
<div class="tt-suggestion tt-selectable"></div>
<div class="tt-suggestion tt-selectable"></div>

我的代码:

var gameTitles= new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: '../api/autocomplete/%QUERY',
    wildcard: '%QUERY'
  }
});

$('#title').typeahead({minLength: 3}, {
  name: 'game-titles',
  display: 'value',
  source: gameTitles
});

作为引用，远程返回以下内容，因此我确定我的查询已正确传递

[
  "Warcraft II: Tides of Darkness",
  "Warcraft II: Beyond the Dark Portal",
  "Warcraft III: Reign of Chaos",
  "Warcraft II: The Dark Saga",
  "Peggle: World of Warcraft Edition",
  "Warcraft III: Reforged Spoils of War Edition",
  "World of Warcraft",
  "Warcraft III: Reforged",
  "Warcraft: Orcs & Humans",
  "World of Warcraft: Legion"
]

Answer 1

Typeahead 会查找数组中的对象，默认情况下，建议会在这些对象中查找 value，这可以通过将您希望使用的属性名称分配给 显示属性

$('#title').typeahead({}, {
  name: 'game-titles',
  display: 'WHATEVER PROPERTY YOU WISH DISPLAYED',
  source: gameTitles
});

此外，typeAhead 不再维护，selectize.js 似乎是一个不错的替代方案