TypeAhead.js zeigt keine Ausgangsschienen an?

Ich versuche, die automatische Vervollständigung für meine Suchleiste einzurichten, damit Ihnen beim Eingeben der automatischen Vervollständigung Beiträge mit ähnlichen Namen vorgeschlagen werden, damit Sie nicht weiter tippen müssen. Ich erhalte überhaupt keine Ausgabe in der Konsole oder auf andere Weise, auch keine Fehler in der Chrome-Konsole.

Ich habe mehrere Tutorials verwendet, um dies einzurichten. Aber hier ist die, nach der ich am meisten gesucht habe:

Tutorial Eins

Tutorial Zwei

TypeAhead.js

Ein Link zum Github meines Projekts, falls ihr weitere Informationen benötigt

Beide haben ähnliche Ansätze, um dies einzurichten, also dachte ich mir, dass das in Ordnung wäre. Aber ich bin immer noch nicht in der Lage, die automatische Vervollständigung überhaupt zum Laufen zu bringen.

Wenn ich renne:

bundle exec rake routes

Ich bekomme das, was es so aussehen lässt, als gäbe es keinen Autocomplete-Pfad, aber es sollte einen haben, da ich die Autocomplete-Methode in meiner Listing_Controller.rb erstellt habe, nein? ::

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

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

Ende

Bei der Autocomplete-Methode in meiner listings_controller.rb werden Sie feststellen, dass ich meine Abfragesuche anstelle der Abfrage wie im Beispiel benannt habe, da meine Suchleiste den Namen search hat und die Abfrage so benannt ist.

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

Ich bin mir nicht sicher, warum es nicht funktioniert. Kann jemand bitte einen Blick darauf werfen? Ich habe das Gefühl, dass mir etwas fehlt. Möglicherweise fehlen den Tutorials, die ich verwendet habe, etwas.

BEARBEITEN: Ich habe in einem Beitrag festgestellt, dass jemand versucht hat, seinen Autocomplete-Link zu besuchen, und dass er JSON auf seiner Webseite zurückgibt. Meins ist es jedoch nicht. Als ich versuchte und besuchte: http: // localhost: 3000 / listings / autocomplete? Query =% Untitl Ich sollte einen JSON-Text mit vielen Dingen erhalten, da ich Tonnen von Einträgen mit dem Namen Untitled habe.

Aber meine Konsole zeigt einen langen Fehler:

2016-04-16 20:08:22 -0500: HTTP-Analysefehler, fehlerhafte Anforderung (): #

2016-04-16 20:08:22 -0500: ENV: {"Rack.Version" => [1, 3], "Rack.Fehler" => #>, "Rack.multithread" => true, "Rack .multiprocess "=> false, "ack.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, ich habe die Wortbücher in Listings geändert und auch versucht, die Zeile zu ändern: url: '../listings/autocomplete?query=%QUERY'to url:' ../listings/autocomplete?search=%SEARCH ',' ../listings/autocomplete?search=%QUERY ',' ../listings/autocomplete?query=%SEARCH 'und keiner von diesen hat auch funktioniert.

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

EDIT: Ich denke, es gibt möglicherweise ein Problem mit dem Javascript. Im Atom Text Editor wird der Erfolg in diesem Teil hervorgehoben:

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

Ich habe versucht, dies zu ändern:

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

Aber das Problem bleibt bestehen, ich kenne Javascript nicht sehr gut, aber diese Zeile soll nur Erfolg oder Fehler auf der Konsole ausdrucken, oder? Nichts anderes, also sollte es nichts bewirken?