Twitter-Typeahead 不提供建议

Question

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

有人发现我的代码有什么问题吗？

宝石文件：

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 目标

如果没有错误，点击网络标签：

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

再检查response子标签，是否正确？如果它不正确（服务器给出错误的输出/格式），那么服务器端有问题，请检查生成响应的控制器/动作的来源（参见 rails 日志或headers 子选项卡）。如果它已经正确，很可能是库的错误。

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