Trong bài trước mình đã giới thiệu tới các bạn autocomplete search trong semantic-ui, hôm nay mình xin giới thiệu 1 điều thú vị k kém của semantic ui là dropdown.
Dropdown? Dropdown thì có gì thú vị?
Trong semantic UI, dropdown cũng không có gì khác biệt với bootstrap, tuy nhiên nó có 1 phần mở rộng, từ dropdown, tạo 1 selec tags(như trong wordpress), như hình:
Việc tạo select tags như trên, các bạn có thể dùng jQuery để tạo hay nhiều cách khác, tuy nhiên khá là phức tạp
Thật may là semantic UI hỗ trợ các bạn làm điều đó thật đơn giản
Setup
Trở lại với ví dụ ở bài trước, nếu các bạn quên thì đọc lại bài trước tại đây và làm lại step by step
Tiếp theo, chúng ta cần tạo 1 model có tên tag
rails g model tag tag:string và set quan hệ n-n cho model tag với model book
Implement
Bây giờ chúng ta thêm 1 trường select tags trong form create new book.
Trong form book, thêm class cho form như sau
<%= form_for @book, html:{class: "ui form"} do |f| %>
và thêm đoạn code sau
Trong jquery thêm
$('.ui.dropdown.search-tags') .dropdown({ apiSettings: { url: "//" + location.host + "/tags/{query}" }, allowAdditions: true }) ; Đây là hàm của semantic UI, mục đích là
- Cho phép select multiple (allowAdditions: true)
- Lấy giá trị từ link yourdomain/tags. Điều này giống với search ở ví dụ hôm trước, để làm điều đó, ta dùng jbuilder.
Tạo controller tags_controller
def index @tags = Tag.all end trong phần views/tags, tạo file index.json.jbuilder
json.results do json.array!(@tags) do |tag| json.name tag.text json.value tags.text end end và kết quả
Ở đây, mình muốn dùng jbuilder để get giá trị của tags về trong phần view, lý do là vì, khi có nhiều người cũng thao tác trên form, có người tạo tags mới, tags mới này được lưu vào database, người khác trên máy khác, nếu tạo tags cùng tên => conflicted.
Nên việc dùng jbuilder ở đây, sẽ làm cho việc get tags về là realtime, nên khi có 1 ng tạo tags mới, 1 người khác click vào select tags => tags mới sẽ hiện lên mà không cần reload lại trang.
Các bạn test bằng cách tạo tags mới trong rails c, rồi quay lại brownser, click vào chọn tags, tags mới sẽ xuất hiện mà không cần reload lại trang.