使用 JSON 的 Rails Jquery 自动完成失败

Posted

技术标签:

【中文标题】使用 JSON 的 Rails Jquery 自动完成失败【英文标题】:Rails Jquery Autocomplete with JSON fails 【发布时间】:2012-04-04 00:43:20 【问题描述】:

我正在尝试使用远程服务来填充我在 rails 中拥有的自动完成字段。它应该按姓氏查询并返回可用员工

我的控制器中有一个名为 employeeAutocomplete 的操作,它从外部数据库收集数据:

class ServicesController < ApplicationController
 def employeeAutocomplete
  @banner = employeeSearch(params[:term])
  respond_to do |format|
    format.json  render :json => @banner.to_json 
  end
 end

在我的 routes.rb 中,我有一个占位符路由:

match '/banner/cheese' => 'services#employeeAutocomplete'

我可以成功浏览到http://0.0.0.0:3000/banner/cheese.json?term=mac 并接收到一个包含员工数据的数组,如下所示:

[ "LAST_NAME": "MacDougal", "FIRST_NAME": "Elaine", "TITLE": "Internet Technician", "LAST_NAME": "MacCallum", "FIRST_NAME": "Harvey", "TITLE": "Systems Architect" ]

但是,这不适用于自动完成字段。这是我认为的javascript

$("#service_employeeLast").autocomplete(
    source: "/banner/cheese.json"
);

我在 firebug 控制台中收到错误消息:

我束手无策。我不知道我做错了什么,我尝试了两个不同的自动完成插件并不断收到同样的错误 jquery.js:8103

救命!

【问题讨论】:

你能完整显示出现在 JavaScript 控制台中的错误吗? 就是这样。它说 GET 0.0.0.0:3000/banner/cheese.json?term=mcc 然后它说 jquery.js:8103 这是一个image 我什至刚刚修改了它返回的 json 以适应“标签”、“值”键,这使得差异为零。我仍然可以通过网络浏览器访问该 url,但 javascript 的行为就像它无法访问一样。如果我将生成的数组直接粘贴到源代码中:它可以工作!这里的路由有问题。为什么后端js不能像我一样访问url? 你能在没有自动完成功能的情况下执行 AJAX 请求吗?所以$.get('/banner/cheese.json', function (data, status, xhr) console.log(data);) 我添加了一个术语请求,因此它有望返回 $.get('/banner/cheese.json?term=mcc', function (data, status, xhr) console.log(data);) 并在评论中收到与上图相同的消息。 【参考方案1】:

不管你信不信是谷歌浏览器导致了这个问题。显然它不喜欢 localhost ajax 调用。这是按预期工作的更新代码:

services.js

$(function() 
 $( "#service_employeeLast" ).autocomplete(
    source: "/banner/fetch",
    minLength: 2,

 );
);

services_controller

def employeeAutocomplete
    @banner = employeeSearch(params[:term])
    @banner_hash = []
    @banner.each do |b|
        @banner_hash <<  
            :title => b["POSITION_TITLE"], 
            :label => [b["FIRST_NAME"], b["LAST_NAME"]].join(" "), 
            :value => b["LAST_NAME"], 
        
    end
    render :json => @banner_hash
end

这里的关键还在于您的返回值哈希具有标签和值键/值对

【讨论】:

【参考方案2】:

也许您使用render :json =&gt; @banner.to_json 对数据进行了两次编码。应该是render :json =&gt; @banner,数据会自动编码。

【讨论】:

谢谢,这是有道理的。不过似乎没有什么不同:(

以上是关于使用 JSON 的 Rails Jquery 自动完成失败的主要内容,如果未能解决你的问题,请参考以下文章

rails 为 jquery-ui 自动完成小部件格式化 json.jbuilder

jquery自动完成插件,json

在 jquery 自动完成插件中,数据没有被解析为 json

如何在 Rails 中通过 jQuery 调用 JSON 文件?

如何使用 JSON 和 jQuery 在 Rails 2.3.5 中显示服务器错误

Rails 中的动态自动完成,使用 jQuery TokenInput 插件