ประยุกต์ ใช้งาน autocomplete กับ select ข้อมูล สองตาราง

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
select autocomplete ajax

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

ดูแล้ว 16,054 ครั้ง




ตัวอย่าง โค้ดต่อไปนี้ เป็นการประยุกต์ การใช้งาน autocomplete ในการ เรียกข้อมูล
จากฐานข้อมูล สองตาราง มาแสดง  
 
ตารางสำหรับทดสอบ
 
ตาราง tbl_department
 
-- 
-- Table structure for table `tbl_department`
-- 

CREATE TABLE `tbl_department` (
  `department_id` int(11) NOT NULL auto_increment,
  `department_name` varchar(255) NOT NULL,
  PRIMARY KEY  (`department_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

-- 
-- Dumping data for table `tbl_department`
-- 

INSERT INTO `tbl_department` VALUES (1, 'Aerospace Engineers');
INSERT INTO `tbl_department` VALUES (2, 'Agricultural Engineers');
INSERT INTO `tbl_department` VALUES (3, 'Biomedical Engineers');
INSERT INTO `tbl_department` VALUES (4, 'Chemical Engineers');
INSERT INTO `tbl_department` VALUES (5, 'Civil Engineers');

 
ตาราง tbl_officer
 

-- 
-- Table structure for table `tbl_officer`
-- 

CREATE TABLE `tbl_officer` (
  `officer_id` int(11) NOT NULL auto_increment,
  `officer_name` varchar(255) NOT NULL,
  `department_id` int(11) NOT NULL,
  PRIMARY KEY  (`officer_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=16 ;

-- 
-- Dumping data for table `tbl_officer`
-- 

INSERT INTO `tbl_officer` VALUES (1, 'Mr. AAAA', 1);
INSERT INTO `tbl_officer` VALUES (2, 'Mr. BBBB', 1);
INSERT INTO `tbl_officer` VALUES (3, 'Mr. CCCC', 2);
INSERT INTO `tbl_officer` VALUES (4, 'Mr. DDDD', 2);
INSERT INTO `tbl_officer` VALUES (5, 'Mr. EEEE', 2);
INSERT INTO `tbl_officer` VALUES (6, 'Mr. FFFF', 2);
INSERT INTO `tbl_officer` VALUES (7, 'Mr. GGGG', 5);
INSERT INTO `tbl_officer` VALUES (8, 'Mr. HHHH', 5);
INSERT INTO `tbl_officer` VALUES (9, 'Mr. IIII', 5);
INSERT INTO `tbl_officer` VALUES (10, 'Mr. JJJJ', 5);
INSERT INTO `tbl_officer` VALUES (11, 'Mr. KKKK', 5);
INSERT INTO `tbl_officer` VALUES (12, 'Mr. LLLL', 3);
INSERT INTO `tbl_officer` VALUES (13, 'Mr. MMMM', 4);
INSERT INTO `tbl_officer` VALUES (14, 'Mr. NNNN', 4);
INSERT INTO `tbl_officer` VALUES (15, 'Mr. OOOO', 4);
 
ตัวอย่าง
 
 
ดาวน์โหลดไฟล์ ได้ที่ 
 
ไฟล์ทดสอบ autocomplete_with_select.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript" src="autocomplete/autocomplete.js"></script>  
<link rel="stylesheet" href="autocomplete/autocomplete.css"  type="text/css"/>  
</head>

<body>


<form id="form_department" name="form_department" method="post" action="">
<label for="departmentName">Department Name : </label>
  <input name="departmentName" type="text" id="departmentName" size="30" />
  <input type="text" name="departmentID" id="departmentID" /><br />
<label for="departmentName">Office Name : </label>
<select name="officer_id" id="officer_id">
</select>
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	
});
</script>
<script type="text/javascript">  
function make_autocom(autoObj,showObj){  
    var mkAutoObj=autoObj;   
    var mkSerValObj=showObj;   
    new Autocomplete(mkAutoObj, function() {  
        this.setValue = function(id) {        
            document.getElementById(mkSerValObj).value = id;  
			$.post("get_officer.php",{departmentID:id},function(data){
				$("#officer_id").html(data);
			});
        }  
        if ( this.isModified )  
            this.setValue("");  
        if ( this.value.length < 1 && this.isNotClick )   
            return ;      
        return "gDepartment.php?q=" +encodeURIComponent(this.value);  
    });   
}     
   
// การใช้งาน  
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");  
make_autocom("departmentName","departmentID");  
</script> 
</body>
</html>
 
ไฟล์ gDepartment.php
 
<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
// เชื่อมต่อฐานข้อมูล
$link=mysql_connect("localhost","root","test") or die("error".mysql_error());
mysql_select_db("test",$link);
mysql_query("set character set utf8");
 
$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="tbl_department"; // ตารางที่ต้องการค้นหา
$find_field="department_name"; // ฟิลที่ต้องการค้นหา
$sql = "SELECT *  FROM $table_db  WHERE LOCATE('$q', $find_field) > 0 
			ORDER BY  LOCATE('$q', $find_field), $find_field LIMIT $pagesize";
$results = mysql_query($sql);
while ($row = mysql_fetch_array( $results )) {
	$id = $row["department_id"]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row["department_name"] ) ); // ฟิลที่ต้องการแสดงค่า
	// ป้องกันเครื่องหมาย '
	$name = str_replace("'", "'", $name);
	// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
	$display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
	echo "<li onselect=\"this.setText('$name').setValue('$id');\">$display_name</li>";
}
mysql_close();
?>
 
ไฟล์ get_officer.php

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
// เชื่อมต่อฐานข้อมูล
$link=mysql_connect("localhost","root","test") or die("error".mysql_error());
mysql_select_db("test",$link);
mysql_query("set character set utf8");
 
if(isset($_POST['departmentID'])){
	$sql = " SELECT * FROM tbl_officer WHERE department_id='".$_POST['departmentID']."' 	";
	$results = mysql_query($sql);
	if(@mysql_num_rows($results)>0){
		echo "<option value=\"\">----- เลือกชื่อพนักงาน -----</option>";
		while ($row = mysql_fetch_array( $results )) {
			echo "<option value=\"".$row['officer_id']."\">".$row['officer_name']."</option>";
		}
	}else{
		echo "";			
	}
}else{
	echo "";	
}
mysql_close();
?>


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



อ่านต่อที่บทความ









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









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





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

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


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


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







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