如何使用JavaScript从Ruby on Rails获取数据并实现自动补全

嘿，这个需求其实挺常见的，咱们分两种实用的方式来实现，你可以根据自己的数据量和需求选：

方式一：直接在ERB中渲染JS数组（适合数据量小的场景） #

这种方式最简单，直接把Rails里的@ingredients集合提取出名称，转成JS能识别的数组就行：

<%= form.label :name, class: "col-lg-2 control-label" %>
<%= form.text_field :name, id: :autocomplete %>
<script>
  // 从Rails实例变量提取名称并转成JSON格式
  var data = <%= raw @ingredients.pluck(:name).to_json %>;
  $( "#autocomplete" ).autocomplete({ source: data });
</script>

关键说明： #

• pluck(:name) 会从@ingredients集合里只取出所有name属性的值，返回一个Ruby数组
• to_json 把Ruby数组转成JSON格式字符串
• raw 方法用来避免Rails自动把JSON字符串转义成HTML实体（比如把双引号转成"），这样JS才能正确解析成数组

方式二：AJAX动态加载（适合数据量大的场景） #

如果你的食材数据很多，一次性渲染到页面里会增大HTML体积，这时候用AJAX动态搜索更高效：

第一步：添加Controller Action和路由 #

先在对应的Controller里写一个处理自动补全请求的方法：

# 比如在IngredientsController里
def autocomplete
  # 根据用户输入的关键词模糊匹配食材名称
  matched_ingredients = current_user.ingredients.where("name LIKE ?", "%#{params[:term]}%").pluck(:name)
  render json: matched_ingredients
end

然后在config/routes.rb里添加路由：

get 'ingredients/autocomplete', to: 'ingredients#autocomplete'

第二步：修改前端JS代码 #

把原来的静态数组改成AJAX请求：

<%= form.label :name, class: "col-lg-2 control-label" %>
<%= form.text_field :name, id: :autocomplete %>
<script>
  $( "#autocomplete" ).autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "<%= ingredients_autocomplete_path %>",
        dataType: "json",
        data: {
          term: request.term // 把用户输入的关键词传给后端
        },
        success: function(data) {
          response(data); // 把后端返回的匹配结果传给autocomplete组件
        }
      });
    }
  });
</script>

额外注意： #

不管用哪种方式，都要确保你的页面已经正确引入了jQuery和jQuery UI的JS和CSS文件，不然autocomplete方法会失效哦～

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