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

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

เริ่มสร้างแอพพลิเคชัน

เราจะสร้างแอพพลิเคชันของสินค้า โดยสินค้าแต่ละอย่างจะมีสมบัติสองอย่างคือ ชื่อ (name) และราคา (price)

> rails shop
> cd shop
> ruby script/generate scaffold product name:string price:decimal
> rake db:migrate

ลงปลั๊กอิน auto_complete

โค้ดส่วนที่จะช่วยเราทำ autocomplete นั้นอยู่ในปลั๊กอินชื่อ auto_complete เราสามารถลงปลั๊กอินนี้ด้วยการสั่ง

> ruby script/plugin install auto_complete

แก้ไข controller ของ Product

สมมติว่าเราต้องการให้มีการทำ autocomplete ของฟีลด์ name ให้เราแก้ไข ProductController ดังต่อไปนี้ <geshi lang="rails"> class ProductsController < ApplicationController

 auto_complete_for :product, :name

 ...

end </geshi>

สร้างหน้า Search

ต่อไปเราจะทำการสร้างหน้าสำหรับให้ผู้ใช้คนหาสินค้า อันดับแรกให้เพิ่มเมธอด search ใน ProductController

<geshi lang="rails">

 # GET /products/search?name=abc
 # POST /products/search?name=abc
 def search
   if not params[:name].blank?
     @product = Product.find_by_name(params[: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=>{:search=>[:get,:post]}

 ...

end </geshi>