PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

12 August 2014 By


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

CREATE TABLE `tbl_department` (
  `tbl_department_id` int(11) NOT NULL auto_increment,
  `tbl_department_name` varchar(255) NOT NULL,
  PRIMARY KEY  (`tbl_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` (
  `tbl_officer_id` int(11) NOT NULL auto_increment,
  `tbl_officer_name` varchar(255) NOT NULL,
  `tbl_department_id` int(11) NOT NULL,
  PRIMARY KEY  (`tbl_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);
 
ตัวอย่าง
 
 
ดาวน์โหลดไฟล์ ได้ที่ 
http://www.ninenik.com/download/autocomplete_with_select.rar
 
ไฟล์ทดสอบ 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="tbl_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["tbl_department_id"]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row["tbl_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 tbl_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['tbl_officer_id']."\">".$row['tbl_officer_name']."</option>";
		}
	}else{
		echo "";			
	}
}else{
	echo "";	
}
mysql_close();
?>

Tags:: ajax select autocomplete





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