ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์เพิ่มเติม การใช้งาน jQuery UI Autocomplete
ร่วมกับฐานข้อมุล โดยเป็นเนื้อหาต่อ ดัดแปลงจาก
เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย
โดยในตัวอย่างจะประกอบไปด้วยไฟล์ 2 ไฟล์คือ
autocomplete_test.php -- ไฟล์หลักสำหรับทดสอบ
get_suggest.php -- ไฟล์สำหรับติดต่อฐานข้อมูลและดึงรายการค้นหามาใช้งาน
ในที่นี้จะใช้ข้อมูล จากฐานข้อมูล รายชื่อจังหวัดในประเทศไทย (ภาษาไทย)
ตัวอย่าง
ข้อมูล ฐานข้อมูล สำหรับทดสอบ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | -- -- 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <?phpheader("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;?> |
เนื้อหาที่เกี่ยวข้อง