javascript - Twitter-Typeahead 不提供建议

Question

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

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

gem 文件:

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 */ 
})

有可能它绑定(bind)的元素在执行 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}%")

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

旧答案

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

要进行调试，首先，您需要使用 google-chrome、firefox 或 opera，右键单击 code> 并执行 inspect element，现在尝试在 typeahead 输入字段上键入。是否有带数字的红色图标出现？比如:

如果有，只需访问控制台标签:

然后查看导致错误的 javascript 部分，修复它(或者您可以在评论中告诉我)。

一些可能的错误是:

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

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

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

其次查看response子标签，是否正确？如果不正确(服务器提供错误的输出/格式)，则服务器端有问题，请检查生成响应的 Controller /操作的来源(请参阅 Rails 日志或 headers 子选项卡)。如果它已经正确，很可能是库的错误。

如果没有特定的错误消息，我们无法再为您提供帮助，因为我相信仅仅重现您的代码(安装 ruby​​+rails+gems、设置一个表、创建模型和粘贴内容)就需要相当长的时间你在问题中写的)。