Rails/JSON：如何将 JSON 用于 jquery UI 自动完成表单答案

【问题标题】：Rails/JSON: How to use JSON for jquery UI autocomplete formRails/JSON：如何将 JSON 用于 jquery UI 自动完成表单
【发布时间】：2016-09-14 07:34:26
【问题描述】：

请注意，这是针对 Rails 应用程序的。我一直在努力寻找从 json 文件中提取数据的最佳方法，但我似乎无法在任何地方找到我想做的事情的答案。我有一个静态数据列表，就像这样（这是一个 8,000 行长的列表）：

    [
    {"web_page": "http://www.usjc.uwaterloo.ca/", "country": "Canada", "domain": "usjc.uwaterloo.ca", "name": "University of St. Jerome's College"},
    {"web_page": "http://www.ustanne.ednet.ns.ca/", "country": "Canada", "domain": "ustanne.ednet.ns.ca", "name": "St. Anne University"}
    ]

^^ 我将以上内容保存在我的应用程序/资产/javascripts 文件夹中为 universitydata.json

还有我的javascript：

    function updateUniSearch() {
         $("#university-field").autocomplete({
                source: universitydata
            });
    }

这是嵌入的 ruby 文件，其中我有 updateUniSearch() 函数的事件在 keydown 上：

    <%= f.text_field :university, :id => "university-field", :onkeydown=>"updateUniSearch()" %>

所以，假设我将大学数据定义如下：

   var universitydata = ["Maine", "Harvard"];

然后我输入自动完成表单“m”-“缅因”将作为一个选项出现。但在这个文件中，我已在我的 javascript 资产文件夹中保存为 universitydata.json，没有任何反应。我是否设置了这个都错了吗？我是不是保存这个 json 文件不正确？为什么它只适用于本地数组？提前谢谢你。

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby json

【解决方案1】：

一些事情：

大多数自动完成库要求您只“绑定”一次输入。根据您的堆栈溢出帖子，您可以在 onkeydown 事件中发生它。因此，每次您键入时，您都会重新绑定到输入。

请考虑：

$(document).on('ready', function(){
  $("#university-field").autocomplete({
    source: universitydata
  });
});

这将只绑定一次自动完成功能（在页面加载时）

其次，要回答您的主要问题，如果您想从文件中加载 json 数据，则必须发出 AJAX 请求才能将其加载到变量中。鉴于数据是静态的并且数据集非常小，在绑定自动完成程序之前将其作为变量加载是非常好的。将所有这些（数据和您的自动完成事件绑定）放在一个 .js 文件中并使用

<script src="/your-path-to-the-javascript.js"></script>

第三，JavaScipt 约定建议变量名使用蛇形大小写，因此请考虑将变量命名为universityData

【讨论】：