键入第二个字符后，TypeAhead自动完成不起作用，css看起来坏了

Question

这是我的JS，带有bootstrap 3和Asp.net MVC 5的typeahead 0.10.0

var jobCodes = new Bloodhound({
    datumTokenizer: function (d) { return d.JobName; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: "/api/jobservice/getjobcodes"
});

jobCodes.initialize();

$('#jobquery').typeahead(null, {
    name: 'job-codes',
    displayKey: 'JobName',
    source: jobCodes.ttAdapter()
});

以下是我的JSON数据示例：

[{"JobCodeId":101,"JobName":"Agricultural Sciences\r"},{"JobCodeId":102,"JobName":"Animal Sciences\r"},{"JobCodeId":103,"JobName":"Plant & Soil Sciences\r"}]

我遇到的第一个问题是，当我输入第一个字符时，我确实看到了建议，但是在类型为例的情况下没有css，我错过了任何CSS吗？

第二个问题是当我输入第二个角色的建议消失时，你可以在下面的屏幕截图中看到。

Answer 1

当我输入第二个角色时遇到了同样的问题，但我更新了Bloodhound datumTokenizer：

datumTokenizer: function (d) { return d.TagName; },

......对此：

datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.TagName); },

我不确定Bloodhound.tokenizers.whitespace做了什么，但它为我做了诀窍。

对于CSS，我使用stylesheet基于此issue - 但我发现它不适用于最新版本的typeahead.js

Answer 2

对于第一个问题，v0.10中生成的typeahead的DOM结构与先前版本中生成的不同。确保您的CSS相应更新。

对于第二个问题，datumTokenizer和queryTokenizer都应该返回一个令牌数组（即字符串）。但是，您的datumTokenizer只返回一个字符串。根据您的行为，我有2条建议：

如果您只想显示完整字符串匹配的建议，请执行以下操作：

var jobCodes = new Bloodhound({
  datumTokenizer: function (d) { return [d.JobName]; },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: "/api/jobservice/getjobcodes"
});

或者，如果您想要显示单词匹配的建议，请尝试以下操作：

var jobCodes = new Bloodhound({
  datumTokenizer: function (d) { return Bloodhound.tokenizers.nonword(d.JobName); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: "/api/jobservice/getjobcodes"

}）;