การประยุกต์ Chosen jQuery Plugin กับ select ข้อมูล สองตาราง

เขียนเมื่อ 2 ปีก่อน โดย Ninenik Narkdee
chosen autocomplete jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ chosen autocomplete jquery



เนื้อหาต่อไปนี้ เป็นแนวทางเพิ่มเติมจากบทความตามลิ้งค์ด้านล่าง
 
ประยุกต์ ใช้งาน autocomplete กับ select ข้อมูล สองตาราง http://niik.in/516 
 
โดยในที่นี้เราจะใช้ 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>
 

ตัวอย่างรูปผลลัพธ์ และการทำงาน


 

 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ