การประยุกต์ Chosen jQuery Plugin กับ select ข้อมูล สองตาราง
07 September 2018 By Ninenik Narkdeejquery chosen autocomplete
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery chosen autocomplete
ไปที่
Copy
เนื้อหาต่อไปนี้ เป็นแนวทางเพิ่มเติมจากบทความตามลิ้งค์ด้านล่าง
ประยุกต์ ใช้งาน autocomplete กับ select ข้อมูล สองตาราง http://niik.in/516
http://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>
ตัวอย่างรูปผลลัพธ์ และการทำงาน
เนื้อหาที่เกี่ยวข้อง
-
04 Nov2010การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() อ่าน 48,817
ตัวอย่างต่อไปนี้เป็นสร้างไฟล์ json จากฐานข้อมูลด้วย php โดยคร้างสร้างฐานข้อมูลตั
-
12 Aug2014ประยุกต์ ใช้งาน autocomplete กับ select ข้อมูล สองตาราง อ่าน 8,562
ตัวอย่าง โค้ดต่อไปนี้ เป็นการประยุกต์ การใช้งาน autocomplete ในการ เรียกข้อมู
อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy