TypeAhead.js 没有显示任何输出 Rails？

Question

我正在尝试为我的搜索栏设置自动完成功能，以便在您输入自动完成功能时向您推荐名称相似的帖子，这样您就不必继续输入。我在控制台中根本没有得到任何输出，或者在 Chrome 的控制台中也没有错误。

我已经使用了几个教程来尝试设置它。但这是我一直在看最多的一个：

Tutorial One

Tutorial Two

TypeAhead.js

A link to my project's github in case you guys need more information

他们都有一些相似的设置方法，所以我认为这很好。但我仍然无法让自动完成功能正常工作。

当我跑步时：

bundle exec rake routes

我明白了，这使得它看起来没有自动完成路径，但它应该有一个，因为我在我的 listing_controller.rb 中创建了自动完成方法，不是吗？ ：

like_listing_comment PUT      /listings/:listing_id/comments/:id/like(.:format)   comments#upvote
  unlike_listing_comment PUT      /listings/:listing_id/comments/:id/unlike(.:format) comments#downvote
    listing_comments GET      /listings/:listing_id/comments(.:format)            comments#index
                     POST     /listings/:listing_id/comments(.:format)            comments#create
 new_listing_comment GET      /listings/:listing_id/comments/new(.:format)        comments#new
edit_listing_comment GET      /listings/:listing_id/comments/:id/edit(.:format)   comments#edit
     listing_comment GET      /listings/:listing_id/comments/:id(.:format)        comments#show
                     PATCH    /listings/:listing_id/comments/:id(.:format)        comments#update
                     PUT      /listings/:listing_id/comments/:id(.:format)        comments#update
                     DELETE   /listings/:listing_id/comments/:id(.:format)        comments#destroy
        like_listing PUT      /listings/:id/like(.:format)                        listings#upvote
      unlike_listing PUT      /listings/:id/unlike(.:format)                      listings#downvote
     search_listings GET      /listings/search(.:format)                          listings#search
   autocomplete_listings GET      /listings/autocomplete(.:format)                    listings#autocomplete
            listings GET      /listings(.:format)                                 listings#index
                     POST     /listings(.:format)                                 listings#create
         new_listing GET      /listings/new(.:format)                             listings#new
        edit_listing GET      /listings/:id/edit(.:format)                        listings#edit
             listing GET      /listings/:id(.:format)                             listings#show
                     PATCH    /listings/:id(.:format)                             listings#update
                     PUT      /listings/:id(.:format)                             listings#update
                     DELETE   /listings/:id(.:format)                             listings#destroy

routes.rb

resources :listings do
resources :comments do
  member do
    put "like" => "comments#upvote"
    put "unlike" => "comments#downvote"
  end
end

member do
  put "like" => "listings#upvote"
  put "unlike" => "listings#downvote"
end

collection do
  get 'search'
  get :autocomplete 
end

结束

我的 listings_controller.rb 中的自动完成方法，您会注意到我将查询命名为 search 而不是示例中的查询，因为我的搜索栏被命名为 search，它的查询就是这样命名的。

def search
if params[:search]
  @listings = Listing.search(params[:search])
else
  @listings = Listing.all
end
end
def autocomplete
render json: Listing.search(params[:search], autocomplete: false, limit: 10).map do |listing|
  { title: listing.title, value: listing.id }
end
 end

private

# Use callbacks to share common setup or constraints between actions.
def set_listing
  @listing = Listing.find(params[:id])
end

# Never trust parameters from the scary internet, only allow the white list through.
def listing_params
  params.require(:listing).permit(:name, :code, :language, :private)
end

我不确定为什么它不起作用，有人可以看看吗？我觉得我遗漏了一些东西，可能是我一直在使用的教程遗漏了一些东西。

编辑：我在一篇文章中发现有人尝试访问他们的自动完成链接，并在他们的网页上返回 JSON。然而，我的不是。当我尝试访问：http://localhost:3000/listings/autocomplete?query=%Untitl 我应该得到一个包含很多东西的 json 文本，因为我有大量名为 Untitled 的列表。

但是我的控制台显示一个很长的错误：

2016-04-16 20:08:22 -0500：HTTP 解析错误，格式错误的请求（）：#

2016-04-16 20:08:22 -0500: ENV: {"rack.version"=>[1, 3], "rack.errors"=>#>, "rack.multithread"=>true , "rack.multiprocess"=>false, "rack.run_once"=>false, "SCRIPT_NAME"=>"", "QUERY_STRING"=>"", "SERVER_PROTOCOL"=>"HTTP/1.1", "SERVER_SOFTWARE"= >"3.1.0", "GATEWAY_INTERFACE"=>"CGI/1.2", "REQUEST_METHOD"=>"GET", "REQUEST_PATH"=>"/listings/autocomplete"}

listings.js，我已将单词书更改为列表，并尝试将以下行更改为： url: '../listings/autocomplete?query=%QUERY' 到 url: '../listings/autocomplete?search =%SEARCH'、'../listings/autocomplete?search=%QUERY'、'../listings/autocomplete?query=%SEARCH' 并且这些都不起作用。

var ready;
ready = function() {
var engine = new Bloodhound({
    datumTokenizer: function(d) {
        console.log(d);
        return Bloodhound.tokenizers.whitespace(d.title);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '../listings/autocomplete?query=%QUERY'
    }
});

var promise = engine.initialize();

promise
    .done(function() { console.log('success })
    .fail(function() { console.log('err });

$('.typeahead').typeahead(null, {
    name: 'engine',
    displayKey: 'title',
    source: engine.ttAdapter()
});
}

$(document).ready(ready);
$(document).on('page:load', ready);

编辑： 我认为javascript可能存在问题，在Atom Text Editor中它突出显示了这部分的成功：

promise
    .done(function() { console.log('success })
    .fail(function() { console.log('err });

我试过改成这样：

promise
    .done(function() { console.log('success' });
    .fail(function() { console.log('err' });

但是问题依旧，我不是很懂javascript，但是这行应该只是打印成功或者错误到控制台吧？没有别的，所以它应该不会影响任何东西？

Answer 1

网址名称不应包含两个点。

    url: '../listings/autocomplete?query=%QUERY'

应该是

    url: '/listings/autocomplete?query=%QUERY'

与教程一起使用的示例应用程序： https://github.com/trh/rails-typeahead-sample-app