- New Project >> SingleView Application
- ไปที่ .Xib ลาก Object UISearchBar และ UITableView มาใส่
 |
| หน้าจอ iPhone 5 แล้วด้วย ( Xcode 4.5 ขึ้นไปนะครับ ) |
หลังจากนั้นก็เชื่อม Code กับ Xib ตามปกติครับผม
 |
| อย่าลืมเพิ่ม UISearchBarDelegate ด้วยนะครับ |
 |
| ใน ViewController.m ครับ |
 |
| UISearchBar เชื่อม delegate กับ File's Owner ด้วยนะครับ |
จากนั้นเรามาลองสร้างข้อมูลง่ายๆเพื่อใช้ในการ Search ดูครับ
 |
| เพิ่มไปใน ViewController.h |
 |
| เพิ่มไปใน ViewController.m อย่าลืม @Synthesize และ Dealloc |
## อธิบาย Code ##
สังเกตได้ว่าผมจะสร้าง Array และ MutableArray เพราะว่าจุดประสงค์การใช้งานมีความแตกต่างระหว่าง Array กับ MutableArray นะครับ
- Array ข้อมูลสร้างแล้วแก้ไขไม่ได้ ( เพิ่ม ลดข้อมูลไม่ได้ ) แต่เข้าถึงข้อมูลได้เร็ว
- MutableArray ข้อมูลสามารถแก้ไขได้ แต่ใช้เวลาในการเข้าถึงข้อมูลมากกว่า
นั่นหมายความว่าผมเลือกใช้ Array เก็บข้อมูลเริ่มต้น ( Default ) แล้วใช้ MutableArray ที่ใช้ข้อมูลเริ่มต้นเดียวกันแต่สามารถแก้ไขข้อมูลได้นั่นเองครับ
- เพิ่ม Code Require Method ของ UITableViewDataSource
 |
 |
| ยังจำกันได้นะครับ |
หากทำถึงตรงนี้แล้วให้ลอง Build & Run ดูนะครับหากมีข้อมูลแสดงในตารางเป็นไปตามที่เราตั้งค่าไว้ก็ถูกต้องแล้วครับ
- เพิ่ม code ต่อไปนี้ลงใน ViewController.m
## อธิบาย code ##
เป็น Delegate Method ของ UISearchBar ครับโดยจะทำงานเมื่อตัวอักษรหรือข้อความใน SearchBar มีการเปลี่ยนแปลงครับ โดยแบ่งเงื่อนไขเป็น if และ else ซึ่ง
- if หากข้อมูลในช่อง SearchBar มีความยาวเป็น 0 ซึ่งก็คือไม่มีตัวอักษรใดๆ เลย ก็จะทำการล้างข้อมูลเดิมทั้งหมดแล้วนำข้อมูลจากค่าเริ่มต้นมาเก็บไว้ครับ
- else ล้างข้อมูลเดิมแล้วตรวจสอบว่าตัวอักษรหรือข้อความที่พิมพ์ใน searchBar นั้นมีอยู่ในข้อมูลหรือไม่ หากมีก็จะถูกเพิ่มข้อมูลลงไปใน _searchDisplay ซึ่งทำซ้ำไปเรื่อยๆตามจำนวนข้อมูลที่มีจนครบ
เมื่อผ่านการตรวจสอบแล้วก็ให้ TableView ทำการ ReloadData ขึ้นมาแสดงผลใหม่นั่นเองครับ
สามารถตรวจสอบความถูกต้องได้ โดยการพิมพ์ตัวอักษรลงไปใน SearchBar แล้วสังเกตดูว่าข้อมูลใน TableView จะถูกค้นหาตามตัวอักษรที่เราพิมพ์ไปหรือไม่ครับ
เพิ่มเติมอีกเล็กน้อยครับ จะสังเกตได้ว่าข้อมูลค้นหาถูกต้องแล้วแต่ View ของ Keyboard ที่ขึ้นมาเรายังไม่สามารถทำให้มันหายไปได้ เราก็มาเพิ่มเติม code อีกบางส่วนครับ
พอเรากดปุ่ม search ใน Keyboard ก็จะทำให้ View ของ Keyboard หายไปนั่นเองครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น