Tìm hiểu về cách sử dụng thư viện quick search trong Rails

JQuery Quicksearch là một plugin thuận tiện cho việc lọc dữ liệu lớn với đầu vào được nhập bởi người dùng.

Cài đặt

Download và cập nhật các phiên bản mới nhất của jquery quicksearch tại đây.

Cách sử dụng trong Rails

Require thư viện jquery quicksearch vào file application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require lib/jquery_quicksearch.js

Tạo dữ liệu cho bảng search

rails g model user uid:integer name:string email:string

Dữ liệu fake trong file seeds.rb

1000.times do |n|
User.create!(
uid: n+1,
name: Faker::Name.name,
email: Faker::Internet.email)
end

Tạo khung search trên dạng dữ liệu hiển thị table

<form>
<input type="text" id="search">
</form>

<table>
<tbody>
<tr>
<td>Uid</td>
<td>Name</td>
<td>Email</td>
</tr>
</tbody>
</table>

Lệnh thực thi search

Quicksearch sẽ thực hiện việc tìm kiếm trên phần tử DOM trong thẻ table < tbody < tr

$('#search').quicksearch('table tbody tr');

Các options search

Attributes:

• delay: value (thực thi search sau khi nhập input value millisecond giây.
• selector: 'tag' (thực thi search với dữ liệu trong thẻ 'tag', ví dụ: 'td').
• stripeRows: một mảng tên các class để duyệt trên mỗi hàng.
• loader: một truy vấn để tìm một phần tử đang duyệt.
• noResults một truy vấn để hiển thị nếu không có kết quả trả về sau khi search.

Callback functions:

• onBefore: trước khi thực thi search
• onAfter: sau khi thực thi search
• show: thực thi các thuộc tính CSS map với phần tử tương ứng.
• onNoResultFound: hàm được gọi khi không có kết quả trả về.
• hide: hàm sẽ thêm các thuộc tính CSS vào các phần tử chưa có trên DOM.