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>
หลังจากทำขั้นนี้เสร็จแล้ว เมื่อเราพิมพ์ข้อความลงใน 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>
