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

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

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

04 Nov
2010

การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() อ่าน 61,223
ตัวอย่างต่อไปนี้เป็นสร้างไฟล์ json จากฐานข้อมูลด้วย php โดยคร้างสร้างฐานข้อมูลตั
12 Aug
2014

ประยุกต์ ใช้งาน autocomplete กับ select ข้อมูล สองตาราง อ่าน 11,049
ตัวอย่าง โค้ดต่อไปนี้ เป็นการประยุกต์ การใช้งาน autocomplete ในการ เรียกข้อมู

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

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