Rails应用中Typeahead出现重复记录问题求助

我来帮你搞定这个重复记录的问题！结合你的代码场景，下面是几个最常见的原因和对应的解决方案：

1. 禁用Bloodhound的缓存功能 #

Bloodhound默认会缓存远程请求的结果，当你重复输入相同关键词时，旧缓存的结果和新请求的结果容易叠加，导致下拉列表出现重复项。你可以直接在Bloodhound的配置里禁用缓存：

var items = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: '/items/autocomplete?search=%SEARCH',
    wildcard: '%SEARCH',
    cache: false // 新增这一行，禁用缓存
  }
});

如果需要在特定场景手动清空缓存，还可以调用：

items.clear();

2. 确保后端接口返回去重后的结果 #

很多时候重复记录的根源是后端返回的数据本身就有重复。在你的Rails控制器的autocomplete动作里，记得给查询加上去重逻辑：

比如假设你是根据名称模糊查询，修改成：

def autocomplete
  @items = Item.where("name LIKE ?", "%#{params[:search]}%").distinct.pluck(:name)
  render json: @items
end

这里的distinct会让数据库返回无重复的结果，pluck(:name)只提取需要的字段，还能减少不必要的数据传输。

3. 避免重复初始化Typeahead #

如果你的页面存在AJAX刷新、动态加载元素的情况，可能会重复调用typeahead()方法，导致同一输入框绑定了多个实例，进而出现重复下拉项。解决办法是初始化前先销毁已有的实例：

// 先销毁旧实例，再初始化新的
$('#search').typeahead('destroy').typeahead(null, {
  source: items.ttAdapter()
});

4. 自定义渲染函数（可选） #

如果以上方法都没解决，你可以自定义Typeahead的渲染函数，手动对结果去重后再渲染：

$('#search').typeahead(null, {
  source: items.ttAdapter(),
  templates: {
    suggestion: function(data) {
      // 这里可以对数据做去重处理，但更建议从源头解决问题
      return '<div>' + data + '</div>';
    }
  }
});

不过这个方法属于“治标”，优先推荐前面从缓存、后端、初始化层面解决的方案。

你可以先从检查后端返回的数据是否重复开始，这是最常见的原因，然后再尝试禁用缓存或者调整初始化逻辑，应该就能解决问题啦！

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