Ошибка автозаполнения Jquery с ответом json в Rails

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
  });
});

Проблема решена.