如何为预输入数据集中的每个数据令牌生成器设置唯一的minLength

Question

背景：

我正在使用typeahead.js向用户显示搜索建议。我希望用户希望能够同时查看数据集的“标题”和“差异”。我遇到的问题是，当title和diff字段重叠时，可能导致一些令人困惑的结果。

在此图像中，您可以看到活动查询为“ Ea”，并且headhead为标题“ Earthbound”和diff“ Easy”提出了建议。我不喜欢这个结果，我希望查询少于3个字符的查询只能从“标题”字段中提取。

问题：

如何为数据集中的每个数据令牌生成器设置唯一的minLength？这样，建议从从第一个字符开始的标题中提取建议，而建议从查询的至少3个字符开始不从“ diff”中提取。

代码：

var games = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title', 'diff'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: 'https://api.myjson.com/bins/ss93y'
);

$('.basic .typeahead').typeahead({
  hint: false,
  highlight: true,
  minLength: 1,
  limit: 5,
}, {
  name: 'games',
  display: 'title',
  source: games,
  templates: {
    header: '<h3 class="games-header">Games</h3>'
  }
});

JS小提琴： https://jsfiddle.net/n3my5r8u/

Answer 1

鉴于您需要的自定义级别，我建议您实现自己的数据获取和substringMatcher函数，而不要使用Bloodhound。我的解决方案基于official documentation

的第一个示例

fetch('https://api.myjson.com/bins/ss93y').then(result => {
  return result.json();
}).then(games => {
  var substringMatcher = (query, cb) => { 
    var normalizedQuery = query.toLowerCase();
    if (normalizedQuery.length < 3) {
      /* if query shorter than 3 chars, filter on title only */
      return cb(games.filter(game => game.title.toLowerCase().includes(normalizedQuery)));
    } else {
      /* if query at least 3 chars, filter on title or diff */
      return cb(games.filter(game => game.title.toLowerCase().includes(normalizedQuery) || game.diff.toLowerCase().includes(normalizedQuery)));
    }
  }

  $('.basic .typeahead').typeahead({
    hint: false,
    highlight: true,
    minLength: 1,
    limit: 50,
  }, {
    name: 'games',
    display: 'title',
    source: substringMatcher,
    templates: {
      header: '<h3 class="games-header">Games</h3>'
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<div class="basic">
  <input class="typeahead" type="text" placeholder="Search">
</div>

请注意，我将查询和游戏数据集都转换为小写，因此您的搜索将不区分大小写。