如何将正确的 JSON 数据从 Rails 控制器返回到 jQuery 自动完成选择框？答案

【问题标题】：How do I return the right JSON data from a Rails controller to a jQuery autocomplete select box?如何将正确的 JSON 数据从 Rails 控制器返回到 jQuery 自动完成选择框？
【发布时间】：2011-10-11 13:52:04
【问题描述】：

我正在努力实现 jQuery UI 的“组合框”示例。我已经设置了一个远程数据源，它会返回我输入的值。但是，它只有在我返回一个字符串数组时才有效，如下所示：

render :text => Product.find_by_sql("select id, part_number from products where part_number like '#{params[:term]}%'").collect{|p| p.part_number}.to_json

当然，我真正想做的是让它也返回 AR 对象的 id。不幸的是，当我尝试在子数组中返回它们时，我的组合框中出现了一堆“未定义”的值。

这是在我的组合框上触发的“选择”事件：

            select: function( event, ui ) {
                ui.item.option.selected = true;
                self._trigger( "selected", event, {
                    item: ui.item.option
                });
            },

我浏览过 jQuery UI 文档，但无法弄清楚这段代码的实际作用。另外，我无法弄清楚我需要返回的 JSON 的结构应该是什么。

【问题讨论】：

标签： jquery ruby-on-rails jquery-ui jquery-ui-autocomplete

【解决方案1】：

你需要返回一个哈希数组，每个哈希有两个属性——id和label。

我已经成功使用了这个：

collect{|p| {:label=>p.name, :id=>p.id}}.to_json

（我认为您希望在对象上调用 part_number 而不是 name，但这是格式）

另外，我认为您的代码对 sql 注入是开放的，您应该使用“like ?”句法。

Product.where( "part_number like ?", "#{params[:term]}%" )

还有这个 gem，我没用过，但应该可以用：

https://github.com/crowdint/rails3-jquery-autocomplete

【讨论】：

【解决方案2】：

我不能代表您正在处理的 Rails 部分，但我知道自动完成小部件期望的格式如下：

本地数据可以是简单的字符串数组，也可以包含数组中每个项目的对象，带有标签或值财产或两者兼而有之。

上面的意思是，如果你不返回一个简单的Array字符串，你必须有一个对象数组，其中包含至少一个标签或值属性（对象在数组可以包含其他东西，小部件不关心）。例如，以下内容可以正常工作（您可以在事件处理程序中访问 id 属性（例如 ui.item.id）

[{ label: 'Google', id: '1234' }, { label: 'Yahoo', id: '2345' }, ... ];

关于你的第二个问题：

我浏览过 jQuery UI 文档，但我无法弄清楚这段代码的实际作用。

有问题的代码应该修改组合框的底层select 元素并将适当的option 设置为选中状态。如果您使用的是远程数据源，则可能完全不用这个。

【讨论】：