PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ประยุกต์ ใช้งาน jquery ui autocomplete ร่วมกับฐานข้อมูล อย่างง่าย

17 February 2012 By


 ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์เพิ่มเติม การใช้งาน jQuery UI Autocomplete

ร่วมกับฐานข้อมุล โดยเป็นเนื้อหาต่อ ดัดแปลงจาก
 
เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย
http://www.ninenik.com/content.php?arti_id=367
 
โดยในตัวอย่างจะประกอบไปด้วยไฟล์ 2 ไฟล์คือ 
autocomplete_test.php  -- ไฟล์หลักสำหรับทดสอบ
get_suggest.php   --  ไฟล์สำหรับติดต่อฐานข้อมูลและดึงรายการค้นหามาใช้งาน
 
ในที่นี้จะใช้ข้อมูล จากฐานข้อมูล รายชื่อจังหวัดในประเทศไทย (ภาษาไทย)
 
ตัวอย่าง 



Tags:

 
ข้อมูล ฐานข้อมูล สำหรับทดสอบ

-- 
-- Table structure for table `province_th`
-- 

CREATE TABLE `province_th` (
  `province_id` varchar(255) NOT NULL default '',
  `province_name` varchar(255) default NULL,
  `province_region` varchar(255) default NULL,
  PRIMARY KEY  (`province_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

-- 
-- Dumping data for table `province_th`
-- 

INSERT INTO `province_th` VALUES ('1', 'กระบี่', '0');
INSERT INTO `province_th` VALUES ('2', 'กรุงเทพมหานคร', '0');
INSERT INTO `province_th` VALUES ('3', 'กาญจนบุรี', '0');
INSERT INTO `province_th` VALUES ('4', 'กาฬสินธุ์', '0');
INSERT INTO `province_th` VALUES ('5', 'กำแพงเพชร', '0');
INSERT INTO `province_th` VALUES ('6', 'ขอนแก่น', '0');
INSERT INTO `province_th` VALUES ('7', 'จันทบุรี', '0');
INSERT INTO `province_th` VALUES ('8', 'ฉะเชิงเทรา', '0');
INSERT INTO `province_th` VALUES ('9', 'ชลบุรี', '0');
INSERT INTO `province_th` VALUES ('10', 'ชัยนาท', '0');
INSERT INTO `province_th` VALUES ('11', 'ชัยภูมิ', '0');
INSERT INTO `province_th` VALUES ('12', 'ชุมพร', '0');
INSERT INTO `province_th` VALUES ('13', 'เชียงราย', '0');
INSERT INTO `province_th` VALUES ('14', 'เชียงใหม่', '0');
INSERT INTO `province_th` VALUES ('15', 'ตรัง', '0');
INSERT INTO `province_th` VALUES ('16', 'ตราด', '0');
INSERT INTO `province_th` VALUES ('17', 'ตาก', '0');
INSERT INTO `province_th` VALUES ('18', 'นครนายก', '0');
INSERT INTO `province_th` VALUES ('19', 'นครปฐม', '0');
INSERT INTO `province_th` VALUES ('20', 'นครพนม', '0');
INSERT INTO `province_th` VALUES ('21', 'นครราชสีมา', '0');
INSERT INTO `province_th` VALUES ('22', 'นครศรีธรรมราช', '0');
INSERT INTO `province_th` VALUES ('23', 'นครสวรรค์', '0');
INSERT INTO `province_th` VALUES ('24', 'นนทบุรี', '0');
INSERT INTO `province_th` VALUES ('25', 'นราธิวาส', '0');
INSERT INTO `province_th` VALUES ('26', 'น่าน', '0');
INSERT INTO `province_th` VALUES ('27', 'บุรีรัมย์', '0');
INSERT INTO `province_th` VALUES ('28', 'ปทุมธานี', '0');
INSERT INTO `province_th` VALUES ('29', 'ประจวบคีรีขันธ์', '0');
INSERT INTO `province_th` VALUES ('30', 'ปราจีนบุรี', '0');
INSERT INTO `province_th` VALUES ('31', 'ปัตตานี', '0');
INSERT INTO `province_th` VALUES ('32', 'พระนครศรีอยุธยา', '0');
INSERT INTO `province_th` VALUES ('33', 'พะเยา', '0');
INSERT INTO `province_th` VALUES ('34', 'พังงา', '0');
INSERT INTO `province_th` VALUES ('35', 'พัทลุง', '0');
INSERT INTO `province_th` VALUES ('36', 'พิจิตร', '0');
INSERT INTO `province_th` VALUES ('37', 'พิษณุโลก', '0');
INSERT INTO `province_th` VALUES ('38', 'เพชรบุรี', '0');
INSERT INTO `province_th` VALUES ('39', ' เพชรบูรณ์', '0');
INSERT INTO `province_th` VALUES ('40', 'แพร่', '0');
INSERT INTO `province_th` VALUES ('41', 'ภูเก็ต', '0');
INSERT INTO `province_th` VALUES ('42', 'มหาสารคาม', '0');
INSERT INTO `province_th` VALUES ('43', 'มุกดาหาร', '0');
INSERT INTO `province_th` VALUES ('44', 'แม่ฮ่องสอน', '0');
INSERT INTO `province_th` VALUES ('45', 'ยโสธร', '0');
INSERT INTO `province_th` VALUES ('46', 'ยะลา', '0');
INSERT INTO `province_th` VALUES ('47', 'ร้อยเอ็ด', '0');
INSERT INTO `province_th` VALUES ('48', 'ระนอง', '0');
INSERT INTO `province_th` VALUES ('49', 'ระยอง', '0');
INSERT INTO `province_th` VALUES ('50', 'ราชบุรี', '0');
INSERT INTO `province_th` VALUES ('51', 'ลพบุรี', '0');
INSERT INTO `province_th` VALUES ('52', 'ลำปาง', '0');
INSERT INTO `province_th` VALUES ('53', 'ลำพูน', '0');
INSERT INTO `province_th` VALUES ('54', 'เลย', '0');
INSERT INTO `province_th` VALUES ('55', 'ศรีสะเกษ', '0');
INSERT INTO `province_th` VALUES ('56', 'สกลนคร', '0');
INSERT INTO `province_th` VALUES ('57', 'สงขลา', '0');
INSERT INTO `province_th` VALUES ('58', 'สตูล', '0');
INSERT INTO `province_th` VALUES ('59', 'สมุทรปราการ', '0');
INSERT INTO `province_th` VALUES ('60', 'สมุทรสงคราม', '0');
INSERT INTO `province_th` VALUES ('61', 'สมุทรสาคร', '0');
INSERT INTO `province_th` VALUES ('62', 'สระแก้ว', '0');
INSERT INTO `province_th` VALUES ('63', 'สระบุรี', '0');
INSERT INTO `province_th` VALUES ('64', 'สิงห์บุรี', '0');
INSERT INTO `province_th` VALUES ('65', 'สุโขทัย', '0');
INSERT INTO `province_th` VALUES ('66', 'สุพรรณบุรี', '0');
INSERT INTO `province_th` VALUES ('67', 'สุราษฎร์ธานี', '0');
INSERT INTO `province_th` VALUES ('68', 'สุรินทร์', '0');
INSERT INTO `province_th` VALUES ('69', 'หนองคาย', '0');
INSERT INTO `province_th` VALUES ('70', 'หนองบัวลำภู', '0');
INSERT INTO `province_th` VALUES ('71', 'อ่างทอง', '0');
INSERT INTO `province_th` VALUES ('72', 'อำนาจเจริญ', '0');
INSERT INTO `province_th` VALUES ('73', 'อุดรธานี', '0');
INSERT INTO `province_th` VALUES ('74', 'อุตรดิตถ์', '0');
INSERT INTO `province_th` VALUES ('75', 'อุทัยธานี', '0');
INSERT INTO `province_th` VALUES ('76', 'อุบลราชธานี', '0');
 
 
 
โค้ดไฟล์ autocomplete_test.php 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/pepper-grinder/jquery-ui.css" />
    <style type="text/css">
    body {
        font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
        font-size:12px;
    }
    #input_q{
            width:150px;   
    }
    /*   css ส่วนของรายการที่แสดง  */  
    .ui-autocomplete {  
        padding-right: 5px;
        max-height:200px !important;
        overflow: auto !important;
    }  
    /*  css  ส่วนปุ่มคลิกเลือกแสดงรายการทั้งหมด*/  
    .showAll_btn{  
        position: relative;
        top: -2px;    
        border:0px solid;  
        font-size: 10px;
        height: 23px;
        width: 25px;
    }  
    </style>    
</head>
<body>





<div style="margin:auto;width:80%;">

<br><br>
<form id="form001" name="form001" method="post" action="">
   <div>Tags: 
    <input name="input_q" id="input_q" size="50" />
    <button type="button" class="showAll_btn">V</button>
<!--    ส่วนสำหรับกำหนดค่า id ของรายการที่เลือก เพื่อไปใช้งาน-->
    <input name="h_input_q" type="hidden" id="h_input_q" value="" />
    </div>
</form>

<pre>
<?php
// ส่วนทดสอบแสดงค่า เมื่อกดปุ่มส่งข้อมูล 
if(count($_POST)>0){
	print_r($_POST);	
}
?>
</pre>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script type="text/javascript">
	$(function() {
        
		$( "#input_q" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
			minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
			source: "get_suggest.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
			open:function(){ // เมื่อมีการแสดงรายการ autocomplete
				var valInput=$(this).val(); // ดึงค่าจาก text box id=tags มาเก็บที่ตัวแปร
				if(valInput!=""){ // ถ้าไม่ใช่ค่าว่าง
					$(".ui-menu-item a").each(function(){ // วนลูปเรียกดูค่าทั้งหมดใน รายการ autocomplete
						var matcher = new RegExp("("+valInput+")", "ig" ); // ตรวจสอบค่าที่ตรงกันในแต่ละรายการ กับคำค้นหา
						var s=$(this).text();
						var newText=s.replace(matcher, "<b>$1</b>");	// 		แทนค่าที่ตรงกันเป็นตัวหนา
						$(this).html(newText); // แสดงรายการ autocomplete หลังจากปรับรูปแบบแล้ว
					});	
				}
			},
			select: function( event, ui ) {
				// สำหรับทดสอบแสดงค่า เมื่อเลือกรายการ
//				console.log( ui.item ?
//					"Selected: " + ui.item.label :
//					"Nothing selected, input was " + this.value);
				$("#h_input_q").val(ui.item.id); // เก็บ id ไว้ใน hiden element ไว้นำค่าไปใช้งาน
//                setTimeout(function(){
//				    $("#h_input_q").parents("form").submit(); // เมื่อเลือกรายการแล้วให้ส่งค่าฟอร์ม ทันที
//                },500);
			}
		});

        $(".showAll_btn").click(function(){
            // ตรวจสอบถ้ามีการแสดงรายการทั้งหมดอยู่แล้ว  
            if ($( "#input_q" ).autocomplete( "widget" ).is( ":visible" ) ) {  
                $( "#input_q" ).autocomplete( "close" ); // ปิดการแสดงรายการทั้งหมด  
                return;  
            }  
            // ส่งค่าว่างปล่าวไปทำการค้นหา จะได้ผลลัพธ์เป็นรายการทั้งหมด  
            $( "#input_q" ).autocomplete( "search", "" );  

            $( "#input_q" ).focus(); //ให้ cursor ไปอยู่ที่ input text id=tags              
        });

        
	});
</script>

    
</body>
</html>
 
 
โค้ดไฟล์ get_suggest.php 
<?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);       
// ส่วนของการเชิ่อมต่อกับฐานข้อมูล  
mysql_connect("localhost","root","test") or die("Cannot connect the Server");  
mysql_select_db("test") or die("Cannot select database");  
mysql_query("set character set utf8");  
?>

<?php
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="province_th"; // ตารางที่ต้องการค้นหา
$find_field="province_name"; // ฟิลที่ต้องการค้นหา
if($_GET['term']!=""){
	$q = $_GET["term"];
	$sql = "select * from $table_db  
    where  locate('$q', $find_field) > 0 
    order by locate('$q', $find_field), $find_field limit $pagesize";
}else{
	$sql = "select * from $table_db  where 1 limit $pagesize";		
}
$qr=mysql_query($sql);
$total=mysql_num_rows($qr);
while($rs=mysql_fetch_array($qr)) {
    $json_data[]=array(  
        "id"=>$rs['province_id'],  
        "label"=>$rs['province_name'],  
        "value"=>$rs['province_name'],  
    );    
}  
$json= json_encode($json_data);  
echo $json;  
mysql_close();	
exit;
?>
 
 

Tags:: ฐานข้อมูล autocomplete jqueryui





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