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

07 September 2018 By Ninenik Narkdee
jquery chosen autocomplete

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



เนื้อหาต่อไปนี้ เป็นแนวทางเพิ่มเติมจากบทความตามลิ้งค์ด้านล่าง
 
ประยุกต์ ใช้งาน autocomplete กับ select ข้อมูล สองตาราง http://niik.in/516 
http://www.ninenik.com/content.php?arti_id=516 via @ninenik
 
โดยในที่นี้เราจะใช้ Chosen jquery plugin แทนรูปแบบ autocomplete สำหรับตารางฐานข้อมูลสมมติ
ประกอบเนื้อหา เราจะใช้จากบทความด้านบน โดยสามารถเข้าไปทำการดาวน์โหลดได้ที่
    https://harvesthq.github.io/chosen/
 

แตกไฟล์แล้วเลือกเฉพาะไฟล์ต่อไปนี้มาใช้งาน

- 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







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



Tags:: chosen autocomplete jquery







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













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