Otomatik tamamlama ile arama uygulama rayları

Question

Arama fonksiyonuma otomatik tamamlama formunun nasıl yerleştirileceğinden emin değilim.

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

Ben özelleştirilmiş eylemi vardır Aşağıdakilerden kontrolörüne sahip

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

modelidir vardır izleyin: Bir arama için harika

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 

Şimdi bu işi ama, ben Bana sonucu yazdığımı göstermesini isterim ve iki nesne olduğu için jquery otomatik tamamlama özelliğini kullanamıyorum.

Answer 1

Kullanım Twitter typeahead. bazı örnekler burada vardır:

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

Heyecan typeahead ve ihtiyacınız olan tüm bilgileri https://github.com/twitter/typeahead.js/

edinilebilir nasıl kullanılması gidiyorsun verilere bağlıdır

kullanmak 'önerildi'. statik veriler ise Örneğin, bu şekilde uygulayabilir (hep aynı olacak):

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

veri değişirse ve bir model veya bir db tablosundan geldi o zaman deneyebilirsiniz:

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