Twitter-Typeahead 不提供建议

我正在尝试使用twitter-typeahead-rails。我的目的是当我在“#Typeahead”输入框中键入内容时，通过下拉框建议模型“User”的实例。但是，当我打字时什么也没有发生。

有人看到我的代码有什么问题吗？

Gemfile:

gem 'twitter-typeahead-rails'

布局/application.js：

//= require twitter/typeahead
//= require twitter/typeahead/bloodhound

配置/routes.rb：

get 'typeahead/:query' => 'users#typeahead'

控制器/user_controller.rb：

def typeahead
  render json: User.where(name: params[:query])
end    

视图/用户/show.html.erb：

<input type="text" id="typeahead">
<script type="text/javascript">
  var bloodhound = new Bloodhound({
    datumTokenizer: function (d) {
      return Bloodhound.tokenizers.whitespace(d.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: '/typeahead/%QUERY', 
    limit: 50
  });
  bloodhound.initialize();

  $('#typeahead').typeahead(null, {
    displayKey: 'name',
    source: bloodhound.ttAdapter()
  });

  $('#typeahead').bind('typeahead:selected', function(event, datum, name) {
    doSomething(datum.id);
  });
</script>

我在 Web 控制台中没有收到任何错误，并且所有必需的文件显然都已包含在内：

页面来源

<script data-turbolinks-track="true" src="/assets/twitter/typeahead.bundle.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/typeahead.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/typeahead/bloodhound.js?body=1"></script>

网络控制台：

EDIT 1

尝试用以下代码包装 javascript 代码：

$(document).ready(function(){ 
  /* the bloodhound, typeahead and bind script */ 
})

当 JavaScript 代码执行时，它所绑定的元素可能尚未初始化。

EDIT 2

尝试更改：

render json: User.where(name: params[:query])

Into:

q = params[:query]
render json: User.where('name LIKE ?', "%#{q}%")

# alternate syntax:
#render json: User.where('name LIKE :x', x: "%#{q}%")

# or when you want case-insensitive search:
#q = params[:query].to_s.downcase
#render json: User.where('LOWER(name) LIKE ?, "%#{q}%")

因此，建议给出所有带有子字符串的结果，而不是完全匹配。

旧答案

这不是正确的答案，但值得尝试。这适用于调试任何 Web 应用程序/ajax 应用程序。

要调试，首先，您需要使用google-chrome, firefox or opera, right click在窗户上做inspect element，现在尝试在预输入输入字段中键入内容。是否出现带有数字的红色图标？例如：

如果有的话，只需访问console tab:

看看 JavaScript 的哪一部分导致了错误，修复它（或者你可以在评论中告诉我）。

一些可能的错误是：

• JavaScript 语法错误
• 错误的ajax目标

如果没有错误，点击网络选项卡：

查找在 typeahead 输入字段中输入时发送的 ajax，首先检查headers子选项卡，让用户认为Form Data是正确的（您正在向服务器发送正确的消息）。

其次检查response子选项卡，正确与否？如果不正确（服务器给出错误的输出/格式），则服务器端出现故障，请检查生成响应的控制器/操作的来源（请参阅rails日志或headers子选项卡）。如果它已经正确，很可能是库的错误。

如果没有具体的错误消息，我们无法为您提供更多帮助，因为我相信仅重现您的代码就需要相当长的时间（安装 ruby​​+rails+gems、设置一张表、创建模型并粘贴您的内容）我在问题中写道）。