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

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

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

ดูแล้ว 6,545 ครั้ง


เนื้อหาต่อไปนี้ เป็นแนวทางเพิ่มเติมจากบทความตามลิ้งค์ด้านล่าง
 
ประยุกต์ ใช้งาน 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 สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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