การสร้าง live search

เป็นการสร้างส่วนของการค้นหา โดยมีการทำงานในรูปแบบคือ เมื่อผู้ใช้เริ่มพิมพ์ข้อความ โปรแกรมก็จะนำไปประมวลผลหรือค้นหาทันที โดยไม่ต้องกดปุ่ม submit เพื่อสั่งให้ค้นหา เสมือนโปรแกรมจะดักจับที่ textbox เมื่อมีการเปลี่ยนแปลง (onchange)

จากตัวอย่างด้านล่าง โปรแกรมเมอร์ Ruby สามารถนำไปประยุกต์ต่อไปได้

---

เขียน VIEWS -> yourcontroller -> search.rhtml

เขียน action : search เป็นหน้าที่จะแสดงส่วนของกล่องข้อความให้ผู้ใช้กรอกเพื่อทำการค้นหา

<%= start_form_tag({:action=> "search"}, { :onSubmit => "Element.show('spinner');" }) %>
<table>
<tr>
<td><label for="searchtext"><font size="1"><b>Live TR Search:</b></font></label></td>
<td><%= text_field_tag :searchtext %></td>
<td><img alt="spinner" id="spinner" src="http://dev.backcountrymaps.com/images/spinner.gif" style="display:none;" /></td>
</tr>
</table>
<%= end_form_tag%>

<%= observe_field(:searchtext,
                 :frequency => 0.5,
                 :update => :search_hits,
                 :loading => "Element.show('spinner')",
                 :complete => "Element.hide('spinner')",
                 :url => { :action => :live_search }) %>

<div id="search_hits"></div>

อธิบาย code

<%= start_form_tag({:action=> "search"}, { :onSubmit => "Element.show('spinner');" }) %>
...
<%= end_form_tag%>

เป็น tag form ที่ภายในจะเป็น tag ต่างๆ ที่จะรับ input จากผู้ใช้

<%= text_field_tag :searchtext %>

เป็น tag ที่มีการแสดง textbox ชื่อว่า “searchtext” ต้องอยู่ภายใต้ tag form เสมอ

<%= observe_field(:searchtext,
                 :frequency => 0.5,
                 :update => :search_hits,
                 :loading => "Element.show('spinner')",
                 :complete => "Element.hide('spinner')",
                 :url => { :action => :live_search }) 
%>

เป็น tag observe มีหน้าที่ นำข้อความที่ผู้ใช้กรอกจาก textbox “searchtext” ไปประมวลผลต่อที่ “live_search”

---

เขียน VIEWS -> yourcontroller -> live_search.rhtml

เป็นส่วนของการแสดงผลลัพธ์ที่ได้ หลังจากผู้ใช้กรอก และโปรแกรมนำไปประมวลผลหรือค้นหา โดยโปรแกรมเมอร์สามารถแก้ไข สิ่งที่ต้องการให้แสดงผลออกมาได้ที่นี่ เช่นแสดง content ใน database เป็นต้น

<% if @results.empty? %>
  '<%=h @phrase %>' not found!
<% else %>
  '<%=h @phrase %>' found <b><%= @number_match %></b> time(s)!
<% end %>

อธิบาย code

<% if @results.empty? %>
  '<%=h @phrase %>' not found!

จะแสดงผลลัพธ์ออกมา โดยในที่นี้จะนำมาจาก “@results”

---

เขียน CONTROLLERS -> yourcontroller.rb

เป็นการกำหนดโปรแกรมให้ทำนำค่าจาก textbox มาค้นหา และเก็บค่าไว้เพื่อแสดงผลที่ views(live_search.rhtml) ที่เคยได้เขียน code ไปข้างต้น

def live_search
    @phrase = request.raw_post || request.query_string
    @phrase = Iconv.conv("TIS-620","UTF-8",@phrase)
    a1 = "%"
    a2 = "%"
    @searchphrase = a1 + @phrase + a2
    @results = <b>YOURMODEL</b>.find(:all, :conditions => [ "<b>YOURTABLE</b> LIKE ?", @searchphrase])
   
    @number_match = @results.length
   
    render(:layout => false)
end

อธิบาย code

@phrase = Iconv.conv("TIS-620","UTF-8",@phrase)

แปลงข้อความจาก textbox จาก UTF-8 เป็น TIS-620

@phrase = request.raw_post || request.query_string

รับค่าจาก textbox ที่เขียนใน search.rhtml มาใส่ในตัวแปร @phrase

@results = YOURMODEL.find(:all, :conditions => [ "YOURTABLE LIKE ?", @searchphrase])

เป็นการดึงค่า rows จาก database ตามเงื่อนไขที่กำหนด มาเก็บใน array ชื่อ “@results” เพื่อจะนำไปประมวลผลต่อไป

---

เมื่อนำ code ไปปรับแก้ไขการแสดงผล จะได้ผลลัพธ์ดังภาพด้านล่าง

---

Reference

• http://www.bigbold.com

Advertisements