Typeahead Bloodhound对接Django字典数据源时prefetch功能失效如何解决？

核心问题根因 #

你遇到的问题是数据返回格式与分词器配置不匹配，具体原因如下：

• 你当前使用的filterdata函数，经过$.map处理后直接返回了results.value，最终输出的是纯字符串数组（格式：["Apple", "Banana", "Orange"]）
• 你配置的datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')是专门用于处理对象格式数据的，会尝试从每条数据中读取value属性再做分词，但你传入的是纯字符串，不存在value属性，分词器拿到undefined后无法生成有效索引，导致prefetch的数据无法被搜索匹配。

localStorage存储结果说明 #

你看到的存储结果不符合预期：其中datums字段虽然存储了所有值，但trie字段（前缀搜索的索引树）是空的，就是因为分词器没有生成有效索引导致的，这也直接对应了prefetch功能不生效的表现。

修复方案（二选一即可） #

方案1：修改filter函数，适配现有分词器配置 #

保留你当前的datumTokenizer配置，调整filterdata函数返回带value属性的对象数组即可：

function filterdata(data){
      return $.map(data.results, function(results,index){
        // 直接返回原对象，不要只提取value字段
        return results;
      })
    }

方案2：修改分词器配置，适配现有filter返回格式 #

如果你需要保留filterdata返回纯字符串的逻辑，直接把分词器改成适配字符串的版本即可：

var egDjangoVar = new Bloodhound({
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // 替换原obj分词器为普通空格分词器
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: '/ajax/eg/%QUERY.json', 
    wildcard: '%QUERY',
    filter: filterdata
  },
  prefetch: {
    url: '/ajax/prefetch.json',
    // prefetch不需要wildcard配置，属于多余参数可以删掉
    filter: filterdata
  }
});

额外注意点 #

wildcard: '%QUERY'是remote模式的专属参数，prefetch是一次性拉取全量数据，不会替换占位符，该配置属于无效配置可以直接删除。

内容的提问来源于stack exchange，提问作者Chris Dixon