Pada sesi kali ini akan dibahas mengenai instalasi jQuery Flexbox yang digunakan untuk field autocomplete dan integrasi dengan Rails.
Sebagai contoh adalah field autocomplete untuk mencari nama User.
Persiapan
Pertama download terlebih dahulu versi terbaru dari jQuery Flexbox di sini.
Setelah itu extract isi folder zip dan copy file jquery.flexbox.min.js ke dalam folder aplikasi rails app/assets/javascripts/ dan file jquery.flexbox.css ke dalam folder app/assets/stylesheets/. Jangan lupa untuk tag masing-masing assets javascript dan stylesheet tersebut di layout, misalkan layout yang dipakai adalah app/views/layouts/application.html.erb :
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "jquery.flexbox" %>
<%= javascript_include_tag "jquery.flexbox.min" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
Implementasi di Rails
Setelah itu buat model User yang berisi column first_name (strings) dan last_name (strings) dengan generate script di bawah ini di terminal :
rails g model user first_name:string last_name:string
dan rake db:migrate
User.create!(
[
{:first_name => "John", :last_name => "Doe"},
{:first_name => "John", :last_name => "Smith"},
{:first_name => "John", :last_name => "Lennon"}
]
)
[
{:first_name => "John", :last_name => "Doe"},
{:first_name => "John", :last_name => "Smith"},
{:first_name => "John", :last_name => "Lennon"}
]
)
Untuk menampilkan fullname dari user , buat method di app/models/user.rb seperti ini
class User < ActiveRecord::Base
attr_accessible :first_name, :last_name
def full_name
self.first_name + " " + self.last_name
end
end
Buat fungsi autocomplete nya di controller, misalkan di users_controller.erb
def autocomplete
result = []
users = User.find(:all, :conditions => ["users.first_name LIKE ? OR users.last_name LIKE ?", "%"+params[:q]+"%", "%"+params[:q]+"%"])
users.each{|x|
result << {'id' => "#{x.full_name}", 'name' => "#{x.name.to_s}" } unless x.name.blank? }
render :json => {"results" => result, "total" => (users ? users.length : 0) }
end
Jangan lupa daftarkan fungsi tersebut di config/routes.rb dengan method POSTresource :users do
collection do
post 'autocomplete'
end
end
Setelah itu kita implementasikan fungsi javascript pada bagian viewnya, misalkan di app/views/users/index.html.erb
<style type="text/css">
.inpu
{
background: #fff;
width: 440px;
border: 2px solid #666;
border-radius: 4px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 8px;
color: #aaa;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript">
function users_flexbox(){
var query = "<%= @user_name %>";
jQuery("#name_input").flexbox('<%= autocomplete_users_path %>',{
method: 'post',
watermark: query,
showArrow: false,
inputClass: 'inpu',
minChars: 2,
width:200,
queryDelay: 300,
paging:true,
highlightMatches:true,
containerClass:'ffbContainer',
onSelect: function(){
alert(this.getAttribute('hiddenValue'));
}
});
}
$(document).ready(function(){
users_flexbox();
});
</script>
<label>Name :</label>
<div id="name_input"></div>
Fungsi javascript users_flexbox() di atas merupakan fungsi javascript untuk load field input yang sudah diintegrasikan dengan jQuery Flexbox. Dan dari fungsi javascript di atas juga bisa disesuaikan dengan kebutuhan aplikasi yang kita buat. Untuk dokumentasi jQuery flexbox sendiri bisa dilihat di sini.Setelah langkah-langkah di atas selesai diimplementasikan, kita bisa mencoba input keyword dan bisa langsung melihat hasilnya.
Selamat mencoba dan happy coding :)
Tidak ada komentar:
Posting Komentar