如何通过Typeahead.js从JSON接口获取指定数据实现筛选搜索

我一看你这代码就知道问题出在哪了——你直接把接口地址丢给source，但Typeahead根本不知道该从返回的对象数组里拿哪个字段来显示，而且remote类型的source其实需要你自己处理数据请求和筛选逻辑，不是直接填URL就行的。

咱们一步步来改：

核心问题分析 #

1. 你调用的接口返回的是对象数组，每个元素包含userId、id、title等字段，但Typeahead默认不知道要显示哪个字段，所以才会输出undefined。
2. remote类型的source如果直接写URL，Typeahead会把返回的每个对象直接当作候选值，但对象没法直接显示，必须指定要展示的属性。
3. 另外这个接口不支持根据关键词过滤数据，所以得咱们自己在前端做筛选。

修改后的代码示例 #

下面是能正常显示title字段的完整配置：

options.typeahead = {
  datasets: {
    type: 'remote',
    // 把source改成函数，负责请求数据、筛选并传给Typeahead
    source: function(query, process) {
      // 用AJAX请求接口数据
      $.get('https://jsonplaceholder.typicode.com/todos', function(data) {
        // 前端筛选：只保留title包含搜索关键词的项（不区分大小写）
        const filteredItems = data.filter(item => 
          item.title.toLowerCase().includes(query.toLowerCase())
        );
        // 把筛选后的title列表传给process，让Typeahead生成候选框
        process(filteredItems.map(item => item.title));
      });
    },
    // 指定要显示的字段为title
    display: 'title',
    limit: 25
  }
};

如果需要保留完整的对象数据（比如选中后获取id等信息） #

如果你想在用户选中某个选项时，拿到对应的完整对象（比如userId、id），可以稍微调整一下，把完整对象传给Typeahead：

options.typeahead = {
  datasets: {
    type: 'remote',
    source: function(query, process) {
      $.get('https://jsonplaceholder.typicode.com/todos', function(data) {
        const filteredItems = data.filter(item => 
          item.title.toLowerCase().includes(query.toLowerCase())
        );
        // 先把所有title传给process，让Typeahead知道候选文本
        process(filteredItems.map(item => item.title));
        // 把筛选后的完整对象存到local数据源，方便后续获取
        this.local(filteredItems);
      }.bind(this));
    },
    // 自定义显示逻辑，返回item的title
    display: function(item) {
      return item.title;
    },
    limit: 25
  }
};

这样配置后，搜索框里输入关键词，就能看到匹配的title选项了，再也不会出现undefined啦。

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