2

这是我的 JS 与 typeahead 0.10.0 与 bootstrap 3 和 Asp.net MVC 5

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"}]

我遇到的第一个问题是，当我输入第一个字符时，我确实看到了建议，但没有像 typeahead 示例中那样的框的 css 我是否缺少任何 css？

在此处输入图像描述

第二个问题是当我输入第二个字符建议时，您可以在下面的屏幕截图中看到。

在此处输入图像描述

4

2 回答 2

3

当我输入第二个字符时，我遇到了同样的问题，但我从这里更新了 Bloodhound datumTokenizer：

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

...对此：

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

我不确定Bloodhound.tokenizers.whitespace它做了什么，但它对我有用。

至于 CSS，我根据这个问题使用了这个样式表- 但我发现它不适用于最新版本的 typeahead.js

于 2014-02-03T13:21:47.313 回答
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"

});

于 2014-02-05T10:17:46.943 回答