Twitter-Typeahead 不提供建议

Question

我正在尝试使用 twitter-typeahead-rails。我的意图是在我输入“#Typeahead”输入框时通过下拉框建议模型 "User" 的实例。但是，当我键入时没有任何反应。

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

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.

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

如果有，请访问 console 选项卡：

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

少数可能的错误是：

javascript语法错误
错误的ajax目标

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

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

其次查看response子标签，是否正确？如果不正确（服务器给出错误的 output/format），那么服务器端有问题，检查生成响应的 controller/action 的来源（参见 rails 日志或 headers 子选项卡）。如果它已经正确，很可能是库的错误。

如果没有特定的错误消息，我们无法再帮助您，因为我相信仅仅重现您的代码（安装 ruby+rails+gems，设置一个 table，创建模型，然后粘贴您在问题中写的内容）。

Twitter-Typeahead 不提供建议

Twitter-Typeahead isn't offering suggestions

javascript

ruby

jquery

ruby-on-rails-4

typeahead.js