เนื้อหาต่อไปนี้ เป็นแนวทางเพิ่มเติมจากบทความตามลิ้งค์ด้านล่าง
ประยุกต์ ใช้งาน autocomplete กับ select ข้อมูล สองตาราง http://niik.in/516
https://www.ninenik.com/content.php?arti_id=516 via @ninenik
โดยในที่นี้เราจะใช้ Chosen jquery plugin แทนรูปแบบ autocomplete สำหรับตารางฐานข้อมูลสมมติ
ประกอบเนื้อหา เราจะใช้จากบทความด้านบน โดยสามารถเข้าไปทำการดาวน์โหลดได้ที่
แตกไฟล์แล้วเลือกเฉพาะไฟล์ต่อไปนี้มาใช้งาน
- chosen.jquery.min.js
- chosen.min.css
- chosen-sprite.png
- chosen-sprite@2x.png
ไฟล์ dbconnect.php
1 2 3 4 5 6 7 8 9 10 11 | <?php$mysqli = new mysqli("localhost", "root","","test"); /* check connection */if ($mysqli->connect_errno) { printf("Connect failed: %s\n", $mysqli->connect_error); exit(); } if(!$mysqli->set_charset("utf8")) { printf("Error loading character set utf8: %s\n", $mysqli->error); exit(); } |
ไฟล์ get_department.php สำหรับดึงข้อมูลตาราง tbl_department
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?phpheader("Content-type:application/json; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); require_once("dbconnect.php");$json_data = array();$sql = "SELECT * FROM tbl_department WHERE 1 ORDER BY tbl_department_id";$result = $mysqli->query($sql);if($result && $result->num_rows > 0){ while($row = $result->fetch_assoc()){ $json_data[] = array( "department_id" => $row['tbl_department_id'], "department_name" => $row['tbl_department_name'] ); }}// แปลง array เป็นรูปแบบ json string if(isset($json_data)){ $json= json_encode($json_data); if(isset($_GET['callback']) && $_GET['callback']!=""){ echo $_GET['callback']."(".$json.");"; }else{ echo $json; } }?> |
ไฟล์ get_officer.php สำหรับดึงข้อมูลตาราง tbl_officer
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <?phpheader("Content-type:application/json; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); require_once("dbconnect.php");$json_data = array();$more_sql = "";if(isset($_GET['id_department']) && $_GET['id_department']!=""){ $_GET['id_department'] = (int)trim($_GET['id_department']); $more_sql = " AND tbl_department_id = '".$_GET['id_department']."' ";}$sql = "SELECT * FROM tbl_officer WHERE 1 $more_sql ORDER BY tbl_officer_id";$result = $mysqli->query($sql);if($result && $result->num_rows > 0){ while($row = $result->fetch_assoc()){ $json_data[] = array( "officer_id" => $row['tbl_officer_id'], "officer_name" => $row['tbl_officer_name'] ); }}// แปลง array เป็นรูปแบบ json string if(isset($json_data)){ $json= json_encode($json_data); if(isset($_GET['callback']) && $_GET['callback']!=""){ echo $_GET['callback']."(".$json.");"; }else{ echo $json; } }?> |
ไฟล์ demo.php
คำอธิบายแสดงในโค้ด ในตัวอย่างใช้ bootstrap css ประกอบ สามารถตัดออกได้ ส่วนไฟล์ของ chosen ที่มี
การเรียกใช้งานจะมีไฟล์ chosen.min.css และ chosen.jquery.min.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <?php require_once("dbconnect.php"); ?><!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Document</title> <link rel="stylesheet" href="chosen.min.css"></head><body> <br><br><br> <div class="container w-50"> <form id="form_department" name="form_department" method="post" action=""> <label for="departmentName">Department : </label> <select name="departmentName" id="departmentName"> <option value="">Choose a Department Name...</option> </select><br /> <label for="departmentName">Office : </label> <select name="officer_id" id="officer_id" disabled="disabled"> <option value="">Choose a Office Name...</option> </select></form> </div> <script src="chosen.jquery.min.js"></script><script type="text/javascript">$(function(){ $.getJSON( "get_department.php") // ดึงข้อมูลตาราง department .done(function( json ) { var htmlOption = ""; if(json!=null && json.length>0){ // ถ้ามีข้อมูล htmlOption+='<option value="">Choose a Department Name...</option>'; $.each(json,function(i,k){ // วนลูปสร้างลิสรายการจอง json data htmlOption+='<option value="'+json[i].department_id+'">'+json[i].department_name+'</option>'; }); $("#officer_id").chosen(); // เรียกใช้ chosen // นำ option มาแสดงใน department แล้วเรียกใช้ chosen พร้อมกับผูก event เมื่อมีการเปลี่ยนแปลงค่า $("#departmentName").html(htmlOption).chosen().change(function(e){ var val = $(this).val(); // ดึงค่า ของ department ที่เลือก var valLabel = $(this).find("option:selected").text(); // ดุึงข้อความของ department ที่เลือก if(val!=""){ // ถ้าไม่ใช่ค่าว่าง // ยกเลิกรูปแบบ chosen ด้วย destroy แล้วเอาการ disabled ออก $("#officer_id").chosen("destroy").prop("disabled",false); // ดึงข้อมูล officer โดยส่งค่า id_department ที่ได้จาก การเลือกครั้งแรก ส่งค่าไปด้วย $.getJSON( "get_officer.php", { id_department: val } ) .done(function( json ) { var htmlOption = ""; if(json!=null && json.length>0){ // ถ้ามีข้อมูล htmlOption+='<option value="">Choose a Office IN '+valLabel+'...</option>'; $.each(json,function(i,k){ // วนลูปสร้างตัวเลือกรายการของ officer htmlOption+='<option value="'+json[i].officer_id+'">'+json[i].officer_name+'</option>'; }); $("#officer_id").html(htmlOption).chosen(); // แสดงรายกร officer และเรียกใช้ chosen } }) .fail(function( jqxhr, textStatus, error ) { var err = textStatus + ", " + error; console.log( "Request Failed: " + err ); }); }else{ // กรณีไม่ได้เลือกค่าใดๆ ให้รีเซ็ตรายกรของ officer var htmlOption = '<option value="">Choose a Office Name...</option>'; $("#officer_id").html(htmlOption).trigger("chosen:updated"); } }); } }) .fail(function( jqxhr, textStatus, error ) { var err = textStatus + ", " + error; console.log( "Request Failed: " + err ); }); });</script></body></html> |
ตัวอย่างรูปผลลัพธ์ และการทำงาน
เนื้อหาที่เกี่ยวข้อง