Skip to main content
select2-with-ajax

การใช้งาน Select2 With Ajax

จากบทความก่อนหน้านี้   เราได้แนะนำถึงการใช้งาน Select2 และ ประยุกต์ การใช้งาน Select2 สร้างตัวเลือก จังหวัด อำเภอ และ ตำบล กันไปแล้ว

ซึ่ง เจ้าตัว Select 2 เป็น ปลักอิน สำหรับ จัดการ select box ให้มีความสามารถมากขึ้น เช่น searching , tagging , remote data sets , infinite scrolling เป็นต้น

ในบทความนี้ ทางเราจะขอแนะนำการใช้งาน  Select2  ให้ สามารถ ค้นหา ข้อมูล จาก Database มาแสดงในช่อง ค้นหา โดยจะแสดงข้อมูล ตามที่ค้นหา ทำให้ สะดวกในการใช้งาน กรณีที่มีข้อมูลเป็นจำนวนมาก

ตัวอย่าง การ ค้นหารายชื่อ ประเทศ ต่าง ๆ จากช่อง Select box  โดยค้นหาจาก ฐานข้อมูล  Country

ตัวอย่างไฟล์ index.php 

โดยการทำงาน นั้น  Class ที่เรียกใช้ Function select2 (ตัวอย่าง กำหนดชื่อ class คือ js-data-example-ajax) จะทำการส่งค่า ตัวแปร ที่รับมาจากช่องกรอกข้อมูล แล้ว ใช้ Ajax ส่ง ค่าที่ได้ไปค้นหาที่ไฟล์ json_data.php โดยใน ไฟล์ json_data.php จะมีการ ใช้คำสั่ง SQL ค้นหาข้อมูล และ ส่งค่ากลับมาแสดงใน ช่อง ของ select box อีกครั้ง

ตัวอย่างไฟล์ json_data.php

ในไฟล์  json_data.php จะมีการเชื่อมต่อ ฐานข้อมูล country และ รับค่าตัวแปร $_GET[‘q’] แล้ว นำค่าที่รับมาไปค้นหาโดยใช้ คำสั่ง SQL  LIKE ในการ กรองข้อมูล ให้ได้ ข้อมูลที่มีคำที่ตรงกับ ค่าที่ส่งมา แล้ว ส่งกลับไป โดย ใช้ คำสั่ง json_encode เพื่อแปลงข้อมูลที่ได้ เป็นรูปแบบ Json โดย  ไฟล์ index.php จะรับค่า Json กลับไปแสดงผล

Download