เนื้อหาต่อไปนี้ เป็นแนวทางเพิ่มเติมจากบทความตามลิ้งค์ด้านล่าง
ประยุกต์ ใช้งาน 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
<?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
<?php
header("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
<?php
header("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
<?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="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
<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="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<!--<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>-->
<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>
ตัวอย่างรูปผลลัพธ์ และการทำงาน
เนื้อหาที่เกี่ยวข้อง