Twitter-Typeahead并未提供建议

Question

我正在尝试使用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'

控制器/ users_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>

网络控制台：

Answer 1

编辑1

尝试使用以下方法包装javascript代码：

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

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

编辑2

尝试更改：

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

分为：

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}%")

所以建议会给所有子字符串结果，而不是精确匹配。

OLD ANSWER

这不是正确答案，但值得尝试。这适用于调试任何web-app / ajax-app。

要进行调试，首先，您需要在窗口中使用google-chrome，firefox或opera，right click并执行inspect element，现在尝试在typeahead输入字段上键入。如果出现带有数字的红色图标？如：

如果有，请访问console标签：

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

几乎没有错误：

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

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

查找输入预输入字段时发送的ajax，首先检查headers子标签，让用户Form Data正确（您正在向服务器发送正确的消息）。

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

如果没有特定的错误消息，我们就无法帮助你了，因为我相信只需要花一点时间来重现你的代码（安装ruby + rails + gems，设置一个表，创建模型，粘贴东西）你在问题中写过的。）