Twitter-Typeahead没有提供建议

Question

我正在尝试使用twitter-typeahead-rails。我的意图是在我输入“ #Typeahead”输入框时通过下拉框建议“用户”模型。但是，键入时什么也没有发生。

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

Gemfile：

gem 'twitter-typeahead-rails'

layouts / application.js：

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

config / routes.rb：

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

controllers / users_controller.rb：

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

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

因此，建议将为所有结果加上子字符串，而不是完全匹配。

旧答案

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

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

如果有，只需访问console标签：

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

几乎没有错误是：

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

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

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

“ >>

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

“ >>

如果没有特定的错误消息，我们将无济于事，因为我相信复制代码（安装ruby + rails + gems，设置一个表，创建模型以及粘贴可以您已经在问题中写过）。

对于任何发现此问题的人，请使用代码的维护版本。原来是越野车。

https://github.com/corejavascript/typeahead.js

Answer 2

对于任何发现此问题的人，请使用代码的维护版本。原来是越野车。