เป็นการสร้างส่วนของการค้นหา โดยมีการทำงานในรูปแบบคือ เมื่อผู้ใช้เริ่มพิมพ์ข้อความ โปรแกรมก็จะนำไปประมวลผลหรือค้นหาทันที โดยไม่ต้องกดปุ่ม 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 ไปปรับแก้ไขการแสดงผล จะได้ผลลัพธ์ดังภาพด้านล่าง