Javascript Twitter Typeahead不是'；不要提建议

我正在尝试使用TwitterTypeahead rails。我的目的是在我输入“#Typeahead”输入框时，通过下拉框建议模型“User”的实例。然而，当我打字时，什么也没有发生

有人看到我的代码有问题吗

Gemfile:

gem 'twitter-typeahead-rails'

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

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

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

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

layouts/application.js:

gem 'twitter-typeahead-rails'

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

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

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

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

config/routes.rb:

gem 'twitter-typeahead-rails'

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

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

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

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

控制器/用户\u controller.rb:

gem 'twitter-typeahead-rails'

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

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

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

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

views/users/show.html.erb:

gem 'twitter-typeahead-rails'

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

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

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

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

var侦探犬=新侦探犬({
datumTokenizer:函数（d）{
return Bloodhound.tokenizers.whitespace（d.value）；
},
queryTokenizer:猎犬，标记，空白，
远程：'/typeahead/%QUERY'，
限额：50
});
嗜血犬初始化（）；
$（'#typeahead'）。typeahead（null{
displayKey:'名称'，
资料来源：猎犬。ttAdapter（）
});
$（'#typeahead'）.bind（'typeahead:selected'，函数（事件、数据、名称）{
剂量测量（基准id）；
});

我在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>

网络控制台：

gem 'twitter-typeahead-rails'

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

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

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

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

---

编辑1

尝试用以下内容包装javascript代码：

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

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

编辑2

尝试从以下位置更改：

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

进入：

因此，该建议将使用子字符串结果给出所有结果，而不是精确匹配

旧答案

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

要调试，首先，您需要使用

googlechrome

，

firefox

或

opera

，

右键单击窗口上的
，然后执行
检查元素
，现在尝试在typeahead输入字段中键入。是否有显示数字的红色图标？例如：


如果有，只需访问
控制台
选项卡：


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

以下是几个可能的错误：


javascript语法错误
错误的ajax目标

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


在键入typeahead输入字段时查找发送的ajax，首先检查
标题
子选项卡，使用户确认
表单数据
是正确的（您正在向服务器发送正确的消息）


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


如果没有具体的错误消息，我们将无法为您提供更多帮助，因为我相信，仅仅复制您的代码（安装ruby+rails+gems，设置一个表，创建模型，粘贴您在问题中编写的内容）就需要相当长的时间。
在“inspect element”或js web控制台中没有错误。我转到了“网络”选项卡，但是，我找不到“标题”或“响应”子选项卡…它们到底在哪里？我正在使用Chrome。在网络选项卡上，当typeahead字段发送ajax请求时，应该会显示一个名为
/typeahead/您键入的内容的新行，单击
名称/路径
列中的该行，将出现一个包含子选项卡的新子窗口：
标题
，
预览
，
响应
，
Cookies
和
计时
。其次，尝试用
$（文档）包装脚本。准备就绪（函数（）{/*猎犬、typeahead和绑定脚本*/}）
，执行javascript代码时可能尚未呈现typeahead字段。很好，包装成功了！好的，在Response标签下面只写“[]”。然而，在标题下，我看不到任何表单数据；我看到的只有“远程地址”、“请求URL”、“请求方法”、“状态代码”、“请求标题”和“响应标题”。我看到，就用这个答案，有140多张选票：