418342 ภาคปลาย 2552/ปฏิบัติการที่ 11

ในปฏิบัติการนี้เราจะใช้ 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 เหมือนเก่า

Play informative for me, Mr. inretent writer.

การทำ autocomplete ในกรณีที่มีความซับซ้อนมากยิ่งขึ้น

ให้ดู http://railscasts.com/episodes/102-auto-complete-association