ผลต่างระหว่างรุ่นของ "418342 ภาคปลาย 2552/ปฏิบัติการที่ 11"
| แถว 7: | แถว 7: | ||
> ruby script/plugin install auto_complete | > ruby script/plugin install auto_complete | ||
| − | + | Wham bam thank you, ma'am, my qeustinos are answered! | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== สร้างหน้า Search == | == สร้างหน้า Search == | ||
รุ่นแก้ไขเมื่อ 10:27, 29 กันยายน 2554
ในปฏิบัติการนี้เราจะใช้ AJAX ในการทำ autocomplete ซึ่งหมายถึงตอนที่มีการพิมพ๋ข้อความในฟอร์ม ตัวเวบแอพพลิเคชันช่วยเลือกคำที่เราต้องการพิมพ์ให้
Walking in the presence of giants here. Cool thiiknng all around!
เนื้อหา
ลงปลั๊กอิน auto_complete
โค้ดส่วนที่จะช่วยเราทำ autocomplete นั้นอยู่ในปลั๊กอินชื่อ auto_complete เราสามารถลงปลั๊กอินนี้ด้วยการสั่ง
> ruby script/plugin install auto_complete
Wham bam thank you, ma'am, my qeustinos are answered!
สร้างหน้า Search
ต่อไปเราจะทำการสร้างหน้าสำหรับให้ผู้ใช้คนหาสินค้า อันดับแรกให้เพิ่มเมธอด search ใน ProductController
<geshi lang="rails">
# GET /products/search?product[name]=abc
# POST /products/search?product[name]=abc
def search
if not params[:product].blank? and not params[:product][:name].blank?
@product = Product.find_by_name(params[:product][:name])
respond_to do |format|
if @product
flash[:notice] = "Product found!"
format.html { redirect_to(@product) }
format.xml { render :xml => @product }
else
format.html { flash[:notice] = "Product not found!" }
format.xml { render :xml => @product.errors, :status => :unprocessable_entity }
end
end
end
end
</geshi>
แล้วเราจึงสร้างหน้าเวบของมัน
<geshi lang="rhtml">
Search Product
<% form_tag do %>
Name: <%= text_field_tag :name %>
<%= submit_tag "Search" %>
<% end %> </geshi>
หลังจากนั้นไปแก้ config/routes.rb ให้มัน route ไปหาหน้า search ได้
<geshi lang="rails"> ActionController::Routing::Routes.draw do |map|
map.resources :products, :collection=>{
:auto_complete_for_product_name=>:get,
:search=>[:get,:post]}
...
end </geshi>
หลังจากทำขั้นนี้เสร็จแล้ว เมื่อเราพิมพ์ข้อความลงใน text box ของหน้า search หากข้อความนั้นตรงกับชื่อของสินค้าสักชิ้น เราก็จะได้ดูรายละเอียดของสิ้นค้าชิ้นนั้น แต่ถ้าไม่ตรงแม้แต่ตัวอักษรเดียว เราก็จะกลับมาที่หน้า search เหมือนเก่า
เพิ่ม autocomplete
อันดับแรกเราต้องเพิ่ม javascript_include_tag ลงในไฟล์ app/views/layouts/product.html.erb ก่อน
<geshi lang="html"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Products: <%= controller.action_name %></title> <%= stylesheet_link_tag 'scaffold' %> <%= javascript_include_tag :defaults %> <-- เพิ่มบรรทัดนี้
</head> <body> </geshi>
เสร็จแล้วแก้ไข app/views/products/search.html.erb ให้ใช้ text_field_with_auto_complete แทน text_field ธรรดา
<geshi lang="html">
Search Product
<% form_tag do %>
Name: <%= text_field_with_auto_complete :product, :name, {}, {:method=>:get} %>
<%= submit_tag "Search" %>
<% end %> </geshi>
การทำ autocomplete ในกรณีที่มีความซับซ้อนมากยิ่งขึ้น
ให้ดู http://railscasts.com/episodes/102-auto-complete-association
