使用数据库中的数据填充 jquery 自动完成功能答案

【问题标题】：populate jquery autocomplete with data from a database使用数据库中的数据填充 jquery 自动完成功能
【发布时间】：2012-11-30 12:06:30
【问题描述】：

我将jQuery Autocomplete 与类别一起使用，我使用了运行良好的演示代码，现在我正在尝试使用我的数据库中的数据填充下拉列表。我在我的视图中使用了这段代码：

:javascript
  $(function() {
      var data = [
          - Datasheet.find(:all).each do |ds|
            { label: "#{ds.title}", category: "Data Sheets" },
          - Brochure.find(:all).each do |br|
            { label: "#{br.title}", category: "Brochures" },

        $( "#search" ).catcomplete({
          delay: 0,
          source: data
      });
  });

但我收到错误 undefined local variable or method 'ds' for #<#<Class:0x00000005c95a18>:0x00000005c8d570>

我不确定是不是因为我将haml 与javascript 混合在一起？还有其他方法吗？在我看来，只有一个名为搜索的文本字段，它与演示代码一起使用。

【问题讨论】：

您在哪个文件中编写此代码。您能否将完整的代码显示在范围内
这是在它所指的表单的haml视图中！
我猜你用演示代码更新了问题，请显示你正在尝试的代码以便人们可以提供帮助
抱歉，忘记更新我的代码了！我已将其更改为我目前正在使用的内容

标签： javascript jquery ruby-on-rails haml jquery-autocomplete

【解决方案1】：

:javascript 等过滤器中的代码不被视为 Haml，它只是通过过滤器的字符串，因此 - 和 = 不像在 Haml 的其余部分中那样工作.不过，您可以使用插值（即#{...} 块）。事实上，这就是导致您的错误的原因——在 "#{ds.title}" 中，Haml 正在尝试评估 ds，但不是在传递给 Datasheet.find 的块的上下文中。

#{} 块可以跨越多行，因此您可以将代码更改为以下内容：

:javascript
  $(function() {
      var data = [
          #{
          (Datasheet.find(:all).map do |ds|
            "{ label: \"#{ds.title}\", category: \"Data Sheets\" }"
          end +
          Brochure.find(:all).map do |br|
            "{ label: \"#{br.title}\", category: \"Brochures\" }"
          end).join(',')
          }
      ];

      $( "#search" ).catcomplete({
        delay: 0,
        source: data
      });
  });

这里不是使用each遍历每个数组，而是使用map创建一个新数组，然后使用+将两个数组相加，最后使用join(',')将它们组合成一个字符串插入到页面中。

然而，这是一段非常丑陋且笨拙的代码。在这种情况下，更好的解决方案是将创建数组的代码提取到帮助程序中，并从您的 Haml 中调用帮助程序。

助手：

def datasheet_array
  Datasheet.find(:all).map do |ds|
    "{ label: \"#{ds.title}\", category: \"Data Sheets\" }"
  end
end

def brochure_array
  Brochure.find(:all).map do |br|
    "{ label: \"#{br.title}\", category: \"Brochures\" }"
  end
end

def array_for_js
  "[#{(datasheet_array + brochure_array).join(',')}]"
end

那么你的 Haml 会更清晰：

:javascript
  $(function() {
      var data = #{array_for_js};

      $( "#search" ).catcomplete({
        delay: 0,
        source: data
      });
  });

【讨论】：