使用自動完成搜索的Rails實現

Question

我不確定如何將自動完成表單添加到我的搜索功能中。

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

我有以下的控制器具有自定義動作

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

該模型具有如下：

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 

現在這個工作非常適合搜索，但它，我想讓它顯示結果，我正在寫它，我不能使用jquery自動完成，因爲它是兩個對象。

Answer 1

使用Twitter typeahead。有一些例子在這裏：

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

Twitter的預輸入和所有你需要的信息可從https://github.com/twitter/typeahead.js/

如何使用

的使用取決於你要的數據有「建議」。例如，如果是靜態數據（總是將是相同的），可以實現這樣說：

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

如果數據的變化，它從一個模型或數據庫表來了，那麼你可以嘗試：

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