2008-10-11 33 views
9

Tôi đang tìm cách dễ nhất để triển khai tính năng "đề xuất" cho trường nhập văn bản trong ứng dụng Rails. Ý tưởng là hoàn thành tên được lưu trữ trong cột cơ sở dữ liệu, cung cấp cho người dùng trình đơn thả xuống của các kết quả phù hợp có thể khi anh ấy nhập.Tính năng "đề xuất" cho hộp văn bản trong ứng dụng đường ray

Cảm ơn mọi đề xuất!

Trả lời

1

EDIT: Tôi sẽ để lại câu trả lời này ở đây như là một loại điểm tham chiếu lý thuyết, nhưng nó có vẻ như autocompleter answer có khả năng là có ích hơn đối với bạn :)

Disclaimer: Mặc dù tôi làm việc cho Google (mà rõ ràng có các phần tử "Gợi ý" trong nhiều giao diện người dùng khác nhau) Tôi đã không xem xét bất kỳ mã nào xung quanh khu vực này, thậm chí không nói với bất kỳ ai về khía cạnh phía máy khách.

Ngôn ngữ phía máy chủ có thể không liên quan ở đây. Bit quan trọng là AJAX được yêu cầu ở phía máy khách.

Tôi đề nghị bạn có bộ đếm thời gian khoảng 1 giây (thử nghiệm để tìm điểm nhạy) được đặt lại mỗi khi người dùng nhập tổ hợp phím vào hộp văn bản và hủy nếu người dùng điều hướng khỏi hộp văn bản. Nếu bộ đếm thời gian kích hoạt, hãy kích hoạt yêu cầu AJAX. Yêu cầu AJAX sẽ chứa những gì người dùng đã gõ cho đến nay. Phản hồi AJAX phải là danh sách các đề xuất và văn bản yêu cầu ban đầu.

Nếu, khi phản hồi AJAX trả về, văn bản trong hộp văn bản vẫn giống với trường trong phản hồi (nghĩa là người dùng chưa nhập từ đó) và nếu hộp văn bản vẫn có tiêu điểm, hãy cung cấp menu thả xuống. (Phải có hàng trăm trang ví dụ về các combobox HTML để thực hiện điều này.)

Tất cả các máy chủ cần làm là phản hồi yêu cầu AJAX bằng cách thực hiện tìm kiếm và định dạng phản hồi phù hợp - dễ hơn rất nhiều so với phía khách hàng!

Hy vọng rằng sẽ giúp - xin lỗi vì không có bất kỳ mã mẫu nào, nhưng tôi nghi ngờ nó khá liên quan và tôi không thực sự là một nhà phát triển JavaScript.

1

Như với hầu hết mọi thứ trong Rails, có một số cách để thực hiện việc này. Các đường ray được sử dụng để bao gồm một bộ trình trợ giúp tự động hoàn thành được tích hợp sẵn, nhưng chức năng đó hiện đã bị xóa đối với plugin auto_complete. Đây có lẽ là cách dễ nhất để bạn có được những gì bạn muốn thực hiện - một lệnh đơn giản trong bộ điều khiển, một số thứ đơn giản trong khung nhìn của bạn - ta-dah. Để sử dụng giải pháp này, bạn chỉ cần cài đặt plugin vào ứng dụng của mình - xem this page cho bạn biết tất cả những gì bạn cần biết để cài đặt và bắt đầu.

Như đã lưu ý trong câu trả lời khác, đi tuyến đường này sẽ tận dụng nguyên mẫu và khung AJAX scriptaculous đi kèm với Rails. Có các khung công tác AJAX khác, đáng chú ý là JQuery, cũng có thể giúp bạn thực hiện chức năng này, nhưng bạn sẽ có nhiều học tập để sử dụng chúng hơn là chỉ với plugin.

1

Bạn cũng có thể thử loại này cách tiếp cận hơi thủ công hơn

# your_view.rhtml 

<%= text_field 'contact', 'name', :id => 'suggest' %> 
<div id='dropdown' style='display:none; z-index: 100; background: #FFFFFF'></div> 

<script> 
    new Ajax.Autocompleter('suggest', 'dropdown', "<%= url_for :controller => 'contacts', :action => 'suggest_name' %>") 
</script> 

# contacts_controller.rb 

def suggest_name 
    query_string = params[:contact][:name] 
    @contacts = Contact.find.all :conditions => ['name ilike ?', "%#{query_string}%"] 
    render :partial => 'name_suggestions' 
end 

# contacts/_name_suggestions.rhtml 

<ul> 
<% for contact in @contacts %> 
    <li><%= contact.name %></li> 
<% end %> 
</ul> 
8

Rails làm cho 'suggest' kiểu hoàn thành tự động trên các lĩnh vực văn bản thực sự dễ dàng bằng cách sử dụng phương pháp text_field_with_auto_complete.

Trong Rails 1.x phương pháp này được xây dựng thành ActionView::Helpers::JavaScriptMacrosHelper, nhưng đối với Rails 2.x nó đã được chuyển đến a separate plugin.

Giả sử bạn có một kiểu gọi là Post có trường văn bản được gọi là title. Theo quan điểm của bạn, nơi bạn thường sử dụng text_field_tag (hoặc f.text_field), chỉ cần sử dụng text_field_with_auto_complete thay vì:

<%= text_field_with_auto_complete :post, :title %> 

Ngoài ra, trong PostsController, bạn phải đưa ra tuyên bố tương ứng:

class PostsController < ApplicationController 
    auto_complete_for :post, :title 
end 

Điều này không đằng sau hậu trường là tự động thêm một hành động được gọi là auto_complete_for_[object]_[method] vào bộ điều khiển. Trong ví dụ trên, hành động này sẽ được gọi là auto_complete_for_post_title.

Điều đáng nói là cuộc gọi find được sử dụng bởi hành động được tạo tự động này sẽ hoạt động trên tất cả các đối tượng mô hình, ví dụ: Post.find(:all, ...). Nếu đây không phải là hành vi bạn muốn (ví dụ: nếu muốn giới hạn tìm kiếm cho một tập hợp con cụ thể là Post s dựa trên người dùng đã đăng nhập) thì bạn phải xác định hành động auto_complete_for_[object]_[method] của riêng mình trong bộ điều khiển.

Các vấn đề liên quan