Rails Implementierung der Suche mit Autovervollständigung

Question

Ich bin nicht sicher, wie ein Autocomplete-Formular zu meiner Suchfunktion haben.

<%= form_tag "/search", :method => "get" do %> 
    <%= text_field_tag :query, params[:query] %> 
    <%= image_submit_tag "site/blankimg.png", :name => nil %> 
<% end %> 

Ich habe einen Controller der folgenden, die eine angepasste Aktion hat

def query 
    @users= Search.user(params[:query]) 
    @article= Search.article(params[:query]) 
    end 

Das Modell ist hat folgen:

def self.user(search) 
if search 
    User.find(:all, :conditions => ['first_name LIKE ?', "%#{search}%"]) 
    else 
    User.find(:all) 
    end 
end 

def self.article(search) 
    if search 
    Article.find(:all, :conditions => ['title LIKE ?', "%#{search}%"]) 
    else 
    Article.find(:all) 
    end 
end 

Jetzt diese Arbeit groß für eine Suche, aber es, i möchte, dass es mir das Ergebnis zeigt, habe ich es geschrieben, und ich kann nicht jquery Autovervollständigen verwenden, weil es zwei Objekt ist.

Answer 1

Verwenden Sie Twitter typeahead. Es gibt einige Beispiele hier:

http://twitter.github.com/typeahead.js/examples/

Twitter typeahead und alle Informationen, die Sie ist von https://github.com/twitter/typeahead.js/ verfügbar benötigen

Wie

verwenden

Die Verwendung auf der Daten ab, die Sie wollen habe wie 'vorgeschlagen'. Zum Beispiel, wenn es statische Daten (immer sein würde gleich) ist, dass Sie es auf diese Weise implementieren können:

$('input.typeahead').typeahead({ 
    local: ['suggestion1', 'suggestion2', 'suggestion3',...., 'suggestionN'] 
    #The typeahead is going to load suggestions from data in local. 
}); 

Wenn sich die Daten ändern und es kam von einem Modell oder einer DB-Tabelle, dann können Sie versuchen:

Controller: 
def load_suggestions 
    @suggestions = MyModel.select(:name) or MyModel.find(:all, conditions: [...]) #Select the data you want to load on the typeahead. 
    render json: @suggestions 
end 

JS file: 
$('input.typeahead').typeahead([ 
    { 
    prefetch: 'https://www.mipage.com/suggestion.json' #route to the method 'load_suggestions' 
    #This way, typeahead will prefecth the data from the remote url 
    } 
]);