首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Jquery自动完成失败,Rails中有json响应

Jquery自动完成失败,Rails中有json响应
EN

Stack Overflow用户
提问于 2019-04-29 19:20:34
回答 1查看 51关注 0票数 1

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

代码语言:javascript
复制
class Skill < ApplicationRecord
  has_many :user_skills
  has_many :users, through: :user_skills
  validates :name, presence: true, uniqueness: true
end

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

代码语言:javascript
复制
def skills_autocomplete
  @skills = Skill.order(:name).map(&:name)
  render json: @skills
end

我将此操作定义为如下所示:

代码语言:javascript
复制
get 'skills_autocomplete' => "home#skills_autocomplete"

下面是jquery自动完成的代码片段:

代码语言:javascript
复制
$(function() {
    var availableSkills = 'skills_autocomplete.json';
    $('#skills').autocomplete({
      source: availableSkills
    });
  });

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

代码语言:javascript
复制
$(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
  });
});  

自动补全功能工作正常。谁能帮帮忙,我到底做错了什么。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-29 20:08:43

在查看了许多选项之后,我观察到数组作为JSON响应返回,而不是由自动完成处理。所以我做了这样的事情,现在让自动补全工作得很好。

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

现在问题解决了。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55902276

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档