Jquery 自动完成失败，在 Rails 中有 json 响应

Question

我正在尝试将 jquery-ui 自动完成功能实现到 rails 应用程序中。我的 rails 应用程序中有以下模型。

class Skill < ApplicationRecord
  has_many :user_skills
  has_many :users, through: :user_skills
  validates :name, presence: true, uniqueness: true
end

我正在尝试申请自动完成技能名称。我在我的家庭控制器中创建了以下操作。

def skills_autocomplete
  @skills = Skill.order(:name).map(&:name)
  render json: @skills
end

我将此操作定义为路由：

get 'skills_autocomplete' => "home#skills_autocomplete"

下面是 jquery 自动完成的片段：

$(function() {
    var availableSkills = 'skills_autocomplete.json';
    $('#skills').autocomplete({
      source: availableSkills
    });
  });

但是使用此实现，当在搜索框中键入任何字母时，这会将所有技能显示到自动完成框中。另一方面，如果我使用以下实现：

$(function() {
    var availableSkills = [".NET","ASP.NET","AWS","Android","Angular 1","Angular 2+","Bitbucket","Block Chain","C","C#","C++","CSS3","DevOpps","Django","Docker","Express Js","GIT","GITLAB","GraphQL","HTML5","Heroku","IoT","Ionic","JSON","Java","Javascript","Jquery","Jquery UI","MEAN Stack","Material Design","Mongo DB","Node Js","PHP + MySQL","PHP Laravel","Postgresql","Python","React Native","Ruby","Ruby on Rails","Sinatra","Symentic UI","Twitter Bootstrap","Wordpress","XML"]
  $('#skills').autocomplete({
    source: availableSkills
  });
});

自动完成工作正常。任何人都可以帮助我在这里做错了什么。

Answer 1

在查看了很多选项后，我观察到返回的数组作为 JSON 响应未被自动完成处理。所以我做了类似的事情，现在自动完成工作正常了。

$(function() {
  var skills = 'skills_autocomplete.json';
  availableSkills = [];
  $.getJSON(skills, function(data){
    $.each(data, function(index, value){
      availableSkills.push(value);
    });
  });
  $('#skills').autocomplete({
    source: availableSkills
  });
});

问题已解决。

Jquery 自动完成失败，在 Rails 中有 json 响应

Jquery Autocomplete faild with json response in Rails

jquery

ruby-on-rails

jquery-ui-autocomplete