如何使用Django为Typeahead/Bloodhound提供符合要求的远程JSON数据

两个核心参数作用 #

• datumTokenizer：负责将你返回的每条候选数据拆分为可匹配的标记集合，Bloodhound会基于这些标记做搜索匹配。
• queryTokenizer：负责将用户输入的搜索关键词拆分为标记集合，用来和数据的标记做匹配校验。

默认场景下直接使用Bloodhound.tokenizers.whitespace按空格拆分即可满足需求，如果需要自定义匹配规则（比如支持拼音首字母匹配），可以自行替换为自定义拆分函数。

返回格式要求 #

不需要完全照搬官方示例的结构，Bloodhound支持通过filter配置自定义解析后端返回的内容，你当前返回的字符串数组结构完全可以正常使用，无需强制改造为带tokens、value字段的对象结构。如果后续需要给每个选项扩展额外字段（如分类、ID等），再改成对象数组结构即可。

最小复现方案 #

后端Django代码 #

可以直接保留现有逻辑，也可以补充搜索过滤能力：

from django.http import JsonResponse

def fruit_search(request):
    # 拿到用户输入的搜索关键词
    query = request.GET.get("q", "").strip().lower()
    nouns = ['apple', 'banana', 'pear']
    # 过滤匹配的结果，数据量大的话可以换成数据库LIKE查询
    filtered_nouns = [item for item in nouns if query in item.lower()]
    return JsonResponse({'results': filtered_nouns})

前端配置代码 #

先引入typeahead.js和Bloodhound依赖，再初始化组件：

// 初始化搜索引擎
const fruitSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: "/你的Django接口路由?q=%QUERY", // %QUERY会自动替换为用户实时输入的内容
    filter: function (res) {
      return res.results; // 解析后端返回的结果数组
    }
  }
});

// 绑定输入框，初始化typeahead
$("#search-input").typeahead(null, {
  name: "fruits",
  source: fruitSource
});

对应的输入框HTML示例：

<input id="search-input" type="text" placeholder="搜索水果">

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