Javascript 使用rails中的数据库查询获得引导预输入功能

我是rails和javascript的新手，我一生都不能让它工作。所以我尝试使用引导typeahead来获得一个自动完成功能，但一直遇到障碍

首先，我尝试了一个例子，一切都很好。在我看来，我有

在我的javascript资产文件夹中，我有一个名为custom.js的文件，我在其中转储我的javascripts

在那个档案里我有

var colors = ["red", "blue", "green", "yellow", "brown", "black"];

$('#search').typeahead({source: colors});

所以现在当我打开我的视图时，我有一个很好的文本字段，它具有引导功能

但我不想使用静态数组在中查找值。我想访问一个数据库列，并从该列中查找所有值。这些值都是唯一的，理想情况下为输入字段提供相应的id。所以我用谷歌搜索，不幸的是我第一次尝试理解javascript

这个问题，或者一个非常类似的问题，在这里已经被问了几十次了，但不知何故，这些问题都没有让我的代码起作用

一些答案建议使用脚本，但当我复制代码并将其保存为bootstrap-typeahead.js时，custom.js文件中正常工作的js停止工作了，我是否做错了

所以我尝试的是一个最低限度的工作解决方案，正如现场建议的那样。我尝试的代码是custom.js中的这段代码

控制器的动作是这样的

  def index
    if params[:query]
      @sources = Source.find(:all, :conditions => ['name LIKE ?', "%#{params[:query]}%"])
    else
      @sources = Source.all
    end

    respond_to do |format|  
      format.html # index.html.erb
      format.json { render json: @sources }
    end
  end

所以，我想我现在的理解能力已经到了极限。当我呈现视图并在输入字段中键入时，我的控制台将显示

Started GET "/sources?query=s" for 127.0.0.1 at 2013-05-06 12:30:10 +0000
Processing by SourcesController#index as */*
  Parameters: {"query"=>"s"}
  Source Load (0.9ms)  SELECT "sources".* FROM "sources" WHERE (name LIKE '%s%')
  Rendered sources/index.html.erb within layouts/application (0.2ms)
  Rendered layouts/_shim.html.erb (0.1ms)
  Rendered layouts/_header.html.erb (2.8ms)
Completed 200 OK in 194ms (Views: 189.8ms | ActiveRecord: 0.9ms)

---

太棒了，我的功能是调用正确的操作和正确的查询。。。但它有什么回报吗？输入字段中没有显示任何内容名称列中有一条记录的值为KG-01，我如何才能看到函数的json输出是什么？这里哪里出了问题？

从日志中可以看出，您的请求被处理为HTML并呈现索引，而不是返回JSON

尝试将$.get替换为$.getJSON。这将告诉jQuery请求JSON，并为您解析JSON结果：

$.getJSON('sources', { query: query }, function (data) {
  // this would print the data to the firefox/chrome javascript console
  console.log(data);

  // the data coming back from your rails action is an array of `Source`
  // records, but typeahead just wants the name.  You could either modify 
  // the server action to just return a list of names, or extract them here.
  var names = data.map(function (source) { return source.name; });

  // Note there is no need to `return` here, as it would be returning from
  // the anonymous callback function, not `source`.
  process(names);
});

---

从日志中，您可以看到您的请求被作为HTML处理并呈现索引，而不是返回JSON

尝试将$.get替换为$.getJSON。这将告诉jQuery请求JSON，并为您解析JSON结果：

$.getJSON('sources', { query: query }, function (data) {
  // this would print the data to the firefox/chrome javascript console
  console.log(data);

  // the data coming back from your rails action is an array of `Source`
  // records, but typeahead just wants the name.  You could either modify 
  // the server action to just return a list of names, or extract them here.
  var names = data.map(function (source) { return source.name; });

  // Note there is no need to `return` here, as it would be returning from
  // the anonymous callback function, not `source`.
  process(names);
});

---

好的，这似乎还不够，键入时列表中没有显示任何内容，日志现在显示Started GET/sources？query=1 for 127.0.0.1 at 2013-05-06 16:09:18+0000 SourcesController处理索引作为JSON参数：{query=>1}Source Load 1.2ms SELECT sources.*从名称（如“%1%”）在8ms视图中完成了200 OK的源代码：2.5ms | ActiveRecord:1.2ms是否有一种快速方法可以查看查询的json输出，以确保我预期的数据正确？这证明非常有用，正如我所说的，我对所有这些都是新手，我不知道javascript控制台。所以在我的问题中，我提到了一个boostrap-typeahead.js，我看到它被提到了，但不能使用，似乎我不能使用它，因为它已经包含在我正在使用的boostrap gem中，所以我之前两次调用它，对吗？无论如何，我得到的错误是：uncaughttypeerror:Object在bootstrap-typeahead.js的第113行中没有方法“toLowerCase”。bootstrap-typeahead.js是typeahead代码位于bootstrap中的位置。该错误表明您正在将一个对象传递给引导，并且再次查看您的代码，您是。您不想传递所有的源对象来处理，只传递值。请注意，我在那里使用的映射函数在IE<9这样的旧浏览器中不受支持。如果你的目标是那些浏览器，你需要通过一个脚本来添加它，比如说，或者想出另一种自己动手获取名称的方法，或者像u.map from Ok之类的东西，这似乎还不够，键入时列表中没有显示任何内容，现在，日志将在2013-05-06 16:09:18+0000 SourcesControllerindex处理127.0.0.1时启动的GET/sources？query=1显示为JSON参数：{query=>1}Source Load 1.2ms SELECT sources.*从名称（如“%1%”）在8ms视图中完成了200 OK的源代码：2.5ms | ActiveRecord:1.2ms是否有一种快速方法可以查看查询的json输出，以确保我预期的数据正确？这证明非常有用，正如我所说的，我对所有这些都是新手，我不知道javascript控制台。所以在我的问题中，我提到了一个boostrap-typeahead.js，我看到它被提到了，但不能使用，似乎我不能使用它，因为它已经包含在我正在使用的boostrap gem中，所以我之前两次调用它，对吗？无论如何，我得到的错误是：uncaughttypeerror:Object在bootstrap-typeahead.js的第113行中没有方法“toLowerCase”。bootstr ap-typeahead.js是typeahead代码位于引导中的位置。该错误表明您正在将一个对象传递给引导，并且再次查看您的代码，您是。您不想传递所有的源对象来处理，只传递值。请注意，我在那里使用的映射函数在IE<9这样的旧浏览器中不受支持。如果你把目标放在这些浏览器上，你需要通过一个脚本来添加它，比如说，或者想出另一种自己动手获取名称的方法，或者类似于u.map from的方法

Started GET "/sources?query=s" for 127.0.0.1 at 2013-05-06 12:30:10 +0000
Processing by SourcesController#index as */*
  Parameters: {"query"=>"s"}
  Source Load (0.9ms)  SELECT "sources".* FROM "sources" WHERE (name LIKE '%s%')
  Rendered sources/index.html.erb within layouts/application (0.2ms)
  Rendered layouts/_shim.html.erb (0.1ms)
  Rendered layouts/_header.html.erb (2.8ms)
Completed 200 OK in 194ms (Views: 189.8ms | ActiveRecord: 0.9ms)

$.getJSON('sources', { query: query }, function (data) {
  // this would print the data to the firefox/chrome javascript console
  console.log(data);

  // the data coming back from your rails action is an array of `Source`
  // records, but typeahead just wants the name.  You could either modify 
  // the server action to just return a list of names, or extract them here.
  var names = data.map(function (source) { return source.name; });

  // Note there is no need to `return` here, as it would be returning from
  // the anonymous callback function, not `source`.
  process(names);
});