Szyny implementacja wyszukiwania z autouzupełnianiem

Question

Nie mam pewności, jak utworzyć funkcję autouzupełniania w funkcji wyszukiwania.

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

Mam kontroler następujących składników, które posiada niestandardowe działania

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

Model ten ma postępować:

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 

teraz doskonale do poszukiwania, ale to, że Chciałbym, aby pokazać mi wynik, piszę go i nie mogę używać autouzupełniania jquery, ponieważ jest to dwa obiektu.

Answer 1

Użyj Typ Twittera:. Istnieje kilka przykładów tutaj:

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

Twitter wpisywanie znaków z wyprzedzeniem i wszystkie potrzebne informacje są dostępne https://github.com/twitter/typeahead.js/

Jak korzystać

Zastosowanie zależy od danych, które zostaną uwzględnione mieć "sugerowane". Na przykład, jeśli są to dane statyczne (zawsze będzie taka sama) można wdrożyć go w ten sposób:

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

W przypadku zmiany danych, a ona pochodziła z modelu lub tabeli db to można spróbować:

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