ประยุกต์ ใช้งาน jquery ui autocomplete ร่วมกับฐานข้อมูล อย่างง่าย
17 February 2012ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์เพิ่มเติม การใช้งาน jQuery UI Autocomplete
ร่วมกับฐานข้อมุล โดยเป็นเนื้อหาต่อ ดัดแปลงจาก
เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย
โดยในตัวอย่างจะประกอบไปด้วยไฟล์ 2 ไฟล์คือ
autocomplete_test.php -- ไฟล์หลักสำหรับทดสอบ
gdata.php -- ไฟล์สำหรับติดต่อฐานข้อมูลและดึงรายการค้นหามาใช้งาน
ในที่นี้จะใช้ข้อมูล จากฐานข้อมูล รายชื่อจังหวัดในประเทศไทย (ภาษาไทย)
ข้อมูล ฐานข้อมูล สำหรับทดสอบ
--
-- 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 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>jquery ui autocomplete</title>
<style type="text/css">
body {
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
</style>
<?php
$jquery_ui_v="1.8.5";
$theme=array(
"0"=>"base",
"1"=>"black-tie",
"2"=>"blitzer",
"3"=>"cupertino",
"4"=>"dark-hive",
"5"=>"dot-luv",
"6"=>"eggplant",
"7"=>"excite-bike",
"8"=>"flick",
"9"=>"hot-sneaks",
"10"=>"humanity",
"11"=>"le-frog",
"12"=>"mint-choc",
"13"=>"overcast",
"14"=>"pepper-grinder",
"15"=>"redmond",
"16"=>"smoothness",
"17"=>"south-street",
"18"=>"start",
"19"=>"sunny",
"20"=>"swanky-purse",
"21"=>"trontastic",
"22"=>"ui-darkness",
"23"=>"ui-lightness",
"24"=>"vader"
);
$jquery_ui_theme=$theme[11];
?>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />
<style>
/* css ส่วนของรายการที่แสดง */
.ui-autocomplete {
max-height:200px;
overflow:auto;
}
.ui-button {
margin-left: -1px;
}
.ui-button-icon-only .ui-button-text {
padding: 0.35em;
}
/* css ส่วน textbox */
.ui-autocomplete-input {
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
height:18px;
width:200px;
}
.ui-menu,.ui-menu-item{
}
/* css ส่วนปุ่มคลิกเลือกแสดงรายการทั้งหมด*/
.myselect{
/* border:0px solid;*/
width:20px;
height:25px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label for="input_q">Tags: </label>
<!-- ส่วนสำหรับแสดงค่ารายการที่เลือก -->
<input name="input_q" id="input_q" size="50" />
<!-- ส่วนสำหรับกำหนดค่า id ของรายการที่เลือก เพื่อไปใช้งาน-->
<input name="h_input_q" type="hidden" id="h_input_q" value="" />
</form>
<pre>
<?php
// ส่วนทดสอบแสดงค่า เมื่อกดปุ่มส่งข้อมูล
if(count($_POST)>0){
print_r($_POST);
}
?>
</pre>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#input_q" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
source: "gdata.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 ไว้นำค่าไปใช้งาน
$("#h_input_q").parent("form").submit(); // เมื่อเลือกรายการแล้วให้ส่งค่าฟอร์ม ทันที
}
});
// สร้างปุ่ม สำหรับคลิกแสดงรายการทั้งหมด
$( "<button> </button>" )
.attr( "tabIndex", -1 ) // กำหนด tabindex .ให้กับปุ่ม
.attr( "title", "Show All Items" ) // กำหนด title เมื่อเลื่อนเมาส์มาอยู่เหนือปุ่ม
.addClass("myselect") // ให้ปุ่มนี้มี class=myselect
.insertAfter("#input_q") // แทรกปุ่มนี้ต่อจาก input text id=tags
.button({ // กำหนด รูปแบบของปุ่ม
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false // กำหนดไม่แสดงข้อความใดๆ ในปุ่ม
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-button-icon" )
.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>
โค้ดไฟล์ gdata.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);
echo '[ ';
$i=0;
while ($rs=mysql_fetch_array($qr)) {
$i++;
echo '{"id":"'.$rs['province_id'].'","label":"'.str_replace(""","",htmlentities($rs['province_name'], ENT_QUOTES, "UTF-8")).'","value":"'.str_replace(""","",htmlentities($rs['province_name'], ENT_QUOTES, "UTF-8")).'"}';
if($i<$total){
echo ",";
}
}
echo ' ]';
mysql_close();
exit;
?>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
25 Oct 08 ส่งอีเมลล์พร้อมกับแนบไฟล์ด้วย php mail function ได้อย่างง่าย อ่าน 6060 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 8378 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 3479 25 Sep 08 การจัดรูปแบบทศนิยมของตัวเลขใน javascript อ่าน 6199 03 Nov 08 เก็บ HTML ไว้ในตัวแปร PHP อย่างง่ายด้วยฟังก์ชัน ob_start() อ่าน 3386 25 Sep 08 แสดง Code สวยๆ Style Google ด้วยเครื่องมือที่เรียกว่า SyntaxHighlighter อ่าน 6157 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 2530 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 1703 14 Feb 09 ข้อแตกต่างระหว่าง mysql_pconnect กับ mysql_connect อ่าน 3308 29 Jul 10 สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่น อ่าน 4295 03 Aug 11 ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่าย อ่าน 2180 13 Jul 10 วิธี load xml ไฟล์ และ แบ่งหน้า ด้วย php อย่างง่าย อ่าน 3603 13 Oct 10 สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map อ่าน 2554 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet อ่าน 3758 13 Oct 11 แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 อ่าน 2271 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 4923 25 Sep 08 ไม่ให้ทำการ คัดลอก ( Copy ) และ วาง ( Paste ) อ่าน 2775 04 Aug 09 การส่งข้อมูลแบบ post ด้วย ajax ของ jquery อ่าน 11026 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4911 03 Jun 09 สร้างระบบ slide เลื่อนซ้าย ขวา ด้วย jquery อย่างง่าย อ่าน 14664