jQuery UI Autocomplete แบบติดต่อกับฐานข้อมูลบน CodeIgniter

published by admin on 09 Feb 2012 - 06:38

Tweet

ช่วงนี้ง่ายยุ่งมากเลยไม่ได้แวะมาเขียนบล็อกซะนาน พอดีเมื่อสักครู่เพิ่งทำงานที่ต้องใช้ Autocomplete พอดี เลยเอามาเขียนบล็อกด้วยเลยละกัน โดยตัวอย่างนี้จะเป็นแนวทางการสร้าง Autocomplete โดยเรียกใช้งานจาก jQuery UI (http://jqueryui.com/demos/autocomplete/#remote) และเมื่อพิมพ์ค้นหาแล้วก็จะเรียกข้อมูลมาจากฐานข้อมูล โดยรีเทิร์นค่าที่ได้มาเป็น JSON และนำมาแสดงเป็นลิสให้เราเลือก ซึ่งในตัวอย่างนี้ผมได้เขียนบน CodeIgniter นะครับ ถือว่าเป็นแนวทางละกัน

ก่อนอื่นอย่าลืมโหลด jquery และ jquery ui มาก่อนนะครับ

ดูตัวอย่างได้ที่ http://jqueryui.com/demos/autocomplete/#remote

โค้ดจะแบ่งเป็น 2 ตัวนะครับ คือส่วนที่ติดต่อกับฐานข้อมูลแล้วส่งค่ากลับมาเป็น JSON และส่วน Script ของ jQuery UI Autocomplete เหมืิอนใน Demo

ตัวอย่างส่วนติดต่อกับฐานข้อมูล

$term = trim($_GET['term']); //รับค่าที่ส่งมาจาก autocomplete
		
$this->db->select('id, name'); //เลือกฟิล id และ name
$this->db->like('name', $term); //ค้นหาเหมือนกับ WHERE name LIKE '%".$term."%' นั่นเอง
$query = $this->db->get('table_name')->result(); //query ข้อมูลจากฐานข้อมูล table_name
		
foreach ($query as $key => $value) //loop เพื่อเก็บข้อมูลต่างๆที่ดึงมา
{
	$row['value'] = trim($value->name); //เป็นค่าที่แสดงใน list ของ autocomplete หน้าค้นหา
	$row['id'] = $value->id;
	$data[] = $row; //สร้าง array
}
		
echo json_encode($data);//จัดรูปแบบ array เป็น JSON

ตัวอย่างส่วน Script ของ jQuery UI Autocomplete

$(function() {
	$( "#birds" ).autocomplete({ //เก็บค่าจากที่เราพิมพ์ใน 
		source: "search.php", //ถ้าใน CodeIgniter ตัวอย่างจะแทนด้วย site_url('name/search') อย่าลืมให้อยู่ใน tag php นะครับ,
		minLength: 2, //กำหนดว่าจะทำการค้นหาหลังจากพิมพ์ input อย่างน้อย 2 ตัวอักษร
		select: function( event, ui ) {
			//จะได้ค่าให้นำไปใช้ตัว 2 ค่าคือ ui.item.value และ ui.item.id
		}
	});
});

จะเห็นได้ว่าไม่ยากเลยใช่มั๊ยครับ

#Tags: CodeIgniter jQuery UI Autocomplete

---