Rails 5中jQuery UI Autocomplete如何每行显示一个条目？

我来帮你排查下问题所在，你遇到的情况应该是数据格式或者前后端交互的环节出了问题，咱们一步步来调整：

1. 修正前端AJAX处理逻辑 #

你之前用eval解析响应内容不仅有安全风险，还容易引发格式问题；而且完全没必要把对象转成字符串再push——jQuery UI的Autocomplete需要的是包含label和value属性的对象数组，不是字符串数组。咱们把前端代码改成这样：

$(function() {
  $('#s').autocomplete({
    source: function(request, response) {
      // 改用JSON格式请求，让jQuery自动解析响应内容
      $.get("/people/search.json", { s: request.term }, function(data) {
        // 把后端返回的数组转成Autocomplete要求的格式
        const suggestions = data.map(item => ({
          label: item,
          value: item
        }));
        // 将处理好的数组传给response函数，触发下拉列表渲染
        response(suggestions);
      }, 'json'); // 指定响应类型为JSON，省去手动解析的步骤
    }
  });
});

2. 确保后端返回标准JSON数组 #

你之前请求.js格式的接口，在Rails里容易混淆响应内容的格式。咱们把后端的search动作改成返回标准JSON：

在app/controllers/people_controller.rb里修改代码：

def search
  # 根据输入关键词匹配用户，这里假设你用name字段做模糊查询
  @people = Person.where("name LIKE ?", "%#{params[:s]}%")
  
  respond_to do |format|
    # 返回由用户名字组成的JSON数组
    format.json { render json: @people.pluck(:name) }
    # 如果之后需要区分label和value（比如value存用户ID，label存名字），可以改成：
    # format.json { render json: @people.map { |p| { label: p.name, value: p.id } } }
  end
end

3. 排查遗留问题（如果仍未解决） #

如果调整后还是显示异常，你可以打开浏览器开发者工具的Network标签，查看/people/search.json的响应内容：

• 确认响应是标准数组格式，比如["SpongeyB", "Alice", "Bob"]，而不是单个字符串或其他非数组结构
• 如果后端返回的是对象数组（比如每个元素包含name字段），那需要修改前端的map逻辑，比如用item.name来获取显示文本

这样调整后，Autocomplete应该就能正常把每个条目单独显示成一行啦。

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