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

ในปฏิบัติการนี้เราจะใช้ AJAX ในการทำ autocomplete ซึ่งหมายถึงตอนที่มีการพิมพ๋ข้อความในฟอร์ม ตัวเวบแอพพลิเคชันช่วยเลือกคำที่เราต้องการพิมพ์ให้

Walking in the presence of giants here. Cool thiiknng all around!

Which came first, the problem or the solution? Luckily it doesn't mttaer.

สร้างหน้า 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