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

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

-- 
-- 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');

<!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>

<?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;
?>