Thực hiện tìm kiếm đường ray với tự động hoàn tất

Question

Tôi không chắc chắn cách có biểu mẫu tự động điền cho chức năng tìm kiếm của mình.

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

Tôi có một bộ điều khiển những điều sau đây trong đó có một hành động tùy chỉnh

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

Mô hình này là có theo:

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 

Bây giờ công việc này tuyệt vời cho một tìm kiếm nhưng nó, i muốn nó cho tôi thấy kết quả có tôi đang viết nó, và tôi không thể sử dụng jquery autocomplete vì nó là hai đối tượng.

Answer 1

Sử dụng Twitter typeahead. Có một số ví dụ ở đây:

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

Twitter typeahead và tất cả các thông tin mà bạn cần là có sẵn từ https://github.com/twitter/typeahead.js/

Làm thế nào để sử dụng

Việc sử dụng phụ thuộc vào dữ liệu bạn đang đi có 'đề xuất'. Ví dụ, nếu nó là dữ liệu tĩnh (luôn luôn là như nhau), bạn có thể thực hiện nó theo cách này:

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

Nếu những thay đổi dữ liệu và nó đến từ một mô hình hay một bảng db sau đó bạn có thể thử:

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