typeahead.js returns "blank" 数据集

Question

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

我在期待什么：

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

发生了什么：

在输入字段中键入时，typeAhead returns 空 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
});

参考以下远程 returns 所以我确定我的查询被正确传递

[
  "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，这可以通过分配您希望使用的属性的名称来更改到 display 属性

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

此外，不再维护 typeAhead，selectize.js 似乎是一个不错的选择

typeahead.js returns "blank" 数据集

typeahead.js returns "blank" dataset

jquery

autocomplete

typeahead.js