สร้างแบบฟอร์ม Autocomplete ดึงข้อมูลจากฐานข้อมูล ด้วย jQuery UI

ตัวอย่างนี้จะทำการสร้าง input autocomplete โดยจะใช้ jQuery UI พร้อมทั้งดึงข้อมูลจากฐานข้อมูล MySQL แบบ AJAX ออกมาเป็น JSON แล้วเอามาแสดงผลการทำงาน

เรามาดูวิธีการสร้างนะครับ (แนะนำให้ใช้โปรแกรม Netbeans ในการสร้างโปรเจ็คนะครับ)

  1. สร้างฐานข้อมูล โดยจะให้ทำการดึงข้อมูล ประเทศ (Country) ออกมาแสดงผลจาก autocomplete ตามตัวอย่างครับ
DROP TABLE IF EXISTS `country`;
CREATE TABLE `country` (
  `country_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
  `country` varchar(50) NOT NULL,
  PRIMARY KEY (`country_id`)
) ENGINE=InnoDB AUTO_INCREMENT=110 DEFAULT CHARSET=utf8;

INSERT INTO `country` VALUES ('1', 'Afghanistan');
INSERT INTO `country` VALUES ('2', 'Algeria');
INSERT INTO `country` VALUES ('3', 'American Samoa');
INSERT INTO `country` VALUES ('4', 'Angola');
INSERT INTO `country` VALUES ('5', 'Anguilla');
INSERT INTO `country` VALUES ('6', 'Argentina');
INSERT INTO `country` VALUES ('7', 'Armenia');
INSERT INTO `country` VALUES ('8', 'Australia');
INSERT INTO `country` VALUES ('9', 'Austria');
INSERT INTO `country` VALUES ('10', 'Azerbaijan');
INSERT INTO `country` VALUES ('11', 'Bahrain');
INSERT INTO `country` VALUES ('12', 'Bangladesh');
INSERT INTO `country` VALUES ('13', 'Belarus');
INSERT INTO `country` VALUES ('14', 'Bolivia');
INSERT INTO `country` VALUES ('15', 'Brazil');
INSERT INTO `country` VALUES ('16', 'Brunei');
INSERT INTO `country` VALUES ('17', 'Bulgaria');
INSERT INTO `country` VALUES ('18', 'Cambodia');
INSERT INTO `country` VALUES ('19', 'Cameroon');
INSERT INTO `country` VALUES ('20', 'Canada');
INSERT INTO `country` VALUES ('21', 'Chad');
INSERT INTO `country` VALUES ('22', 'Chile');
INSERT INTO `country` VALUES ('23', 'China');
INSERT INTO `country` VALUES ('24', 'Colombia');
INSERT INTO `country` VALUES ('25', 'Congo, The Democratic Republic of the');
INSERT INTO `country` VALUES ('26', 'Czech Republic');
INSERT INTO `country` VALUES ('27', 'Dominican Republic');
INSERT INTO `country` VALUES ('28', 'Ecuador');
INSERT INTO `country` VALUES ('29', 'Egypt');
INSERT INTO `country` VALUES ('30', 'Estonia');
INSERT INTO `country` VALUES ('31', 'Ethiopia');
INSERT INTO `country` VALUES ('32', 'Faroe Islands');
INSERT INTO `country` VALUES ('33', 'Finland');
INSERT INTO `country` VALUES ('34', 'France');
INSERT INTO `country` VALUES ('35', 'French Guiana');
INSERT INTO `country` VALUES ('36', 'French Polynesia');
INSERT INTO `country` VALUES ('37', 'Gambia');
INSERT INTO `country` VALUES ('38', 'Germany');
INSERT INTO `country` VALUES ('39', 'Greece');
INSERT INTO `country` VALUES ('40', 'Greenland');
INSERT INTO `country` VALUES ('41', 'Holy See (Vatican City State)');
INSERT INTO `country` VALUES ('42', 'Hong Kong');
INSERT INTO `country` VALUES ('43', 'Hungary');
INSERT INTO `country` VALUES ('44', 'India');
INSERT INTO `country` VALUES ('45', 'Indonesia');
INSERT INTO `country` VALUES ('46', 'Iran');
INSERT INTO `country` VALUES ('47', 'Iraq');
INSERT INTO `country` VALUES ('48', 'Israel');
INSERT INTO `country` VALUES ('49', 'Italy');
INSERT INTO `country` VALUES ('50', 'Japan');
INSERT INTO `country` VALUES ('51', 'Kazakstan');
INSERT INTO `country` VALUES ('52', 'Kenya');
INSERT INTO `country` VALUES ('53', 'Kuwait');
INSERT INTO `country` VALUES ('54', 'Latvia');
INSERT INTO `country` VALUES ('55', 'Liechtenstein');
INSERT INTO `country` VALUES ('56', 'Lithuania');
INSERT INTO `country` VALUES ('57', 'Madagascar');
INSERT INTO `country` VALUES ('58', 'Malawi');
INSERT INTO `country` VALUES ('59', 'Malaysia');
INSERT INTO `country` VALUES ('60', 'Mexico');
INSERT INTO `country` VALUES ('61', 'Moldova');
INSERT INTO `country` VALUES ('62', 'Morocco');
INSERT INTO `country` VALUES ('63', 'Mozambique');
INSERT INTO `country` VALUES ('64', 'Myanmar');
INSERT INTO `country` VALUES ('65', 'Nauru');
INSERT INTO `country` VALUES ('66', 'Nepal');
INSERT INTO `country` VALUES ('67', 'Netherlands');
INSERT INTO `country` VALUES ('68', 'New Zealand');
INSERT INTO `country` VALUES ('69', 'Nigeria');
INSERT INTO `country` VALUES ('70', 'North Korea');
INSERT INTO `country` VALUES ('71', 'Oman');
INSERT INTO `country` VALUES ('72', 'Pakistan');
INSERT INTO `country` VALUES ('73', 'Paraguay');
INSERT INTO `country` VALUES ('74', 'Peru');
INSERT INTO `country` VALUES ('75', 'Philippines');
INSERT INTO `country` VALUES ('76', 'Poland');
INSERT INTO `country` VALUES ('77', 'Puerto Rico');
INSERT INTO `country` VALUES ('78', 'Romania');
INSERT INTO `country` VALUES ('79', 'Runion');
INSERT INTO `country` VALUES ('80', 'Russian Federation');
INSERT INTO `country` VALUES ('81', 'Saint Vincent and the Grenadines');
INSERT INTO `country` VALUES ('82', 'Saudi Arabia');
INSERT INTO `country` VALUES ('83', 'Senegal');
INSERT INTO `country` VALUES ('84', 'Slovakia');
INSERT INTO `country` VALUES ('85', 'South Africa');
INSERT INTO `country` VALUES ('86', 'South Korea');
INSERT INTO `country` VALUES ('87', 'Spain');
INSERT INTO `country` VALUES ('88', 'Sri Lanka');
INSERT INTO `country` VALUES ('89', 'Sudan');
INSERT INTO `country` VALUES ('90', 'Sweden');
INSERT INTO `country` VALUES ('91', 'Switzerland');
INSERT INTO `country` VALUES ('92', 'Taiwan');
INSERT INTO `country` VALUES ('93', 'Tanzania');
INSERT INTO `country` VALUES ('94', 'Thailand');
INSERT INTO `country` VALUES ('95', 'Tonga');
INSERT INTO `country` VALUES ('96', 'Tunisia');
INSERT INTO `country` VALUES ('97', 'Turkey');
INSERT INTO `country` VALUES ('98', 'Turkmenistan');
INSERT INTO `country` VALUES ('99', 'Tuvalu');
INSERT INTO `country` VALUES ('100', 'Ukraine');
INSERT INTO `country` VALUES ('101', 'United Arab Emirates');
INSERT INTO `country` VALUES ('102', 'United Kingdom');
INSERT INTO `country` VALUES ('103', 'United States');
INSERT INTO `country` VALUES ('104', 'Venezuela');
INSERT INTO `country` VALUES ('105', 'Vietnam');
INSERT INTO `country` VALUES ('106', 'Virgin Islands, U.S.');
INSERT INTO `country` VALUES ('107', 'Yemen');
INSERT INTO `country` VALUES ('108', 'Yugoslavia');
INSERT INTO `country` VALUES ('109', 'Zambia');
  1. สร้างไฟล์คอนฟิกฐานข้อมูล config.inc.php
<?php
$config['db_server'] = "localhost";
$config['db_username'] = "root"; // username ของ mysql ของผู้เรียนไม่ตรงกับของตัวอย่างนะครับ
$config['db_password'] = "root"; // password ของ mysql ของผู้เรียนไม่ตรงกับของตัวอย่างนะครับ
$config['db_name'] = "jqueryui"; // database ของ mysql ของผู้เรียนไม่ตรงกับของตัวอย่างนะครับ หรือจะตั้งตามตัวอย่างได้ครับ
  1. สร้างไฟล์แสดงผลข้อมูล index.php
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery UI : Autocomplete</title>
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css">
        
        <script language="javascript" src="js/jquery-1.10.1.min.js"></script>
        <script language="javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
        <script language="javascript" src="js/jquery-ui.js"></script>
    </head>
    <body>

<div>
<h2>jQuery UI : Autocomplete</h2>
</div>


<div style="width: 500px;border: #CCC 1px solid;padding: 15px;margin-bottom: 15px;font-family: 'Arial';font-size: 14px;"><span style="font-weight: bold;">Country : </span><input id="country"></div>


<div style="width: 500px;border: #CCC 1px solid;padding: 15px;">
            <span style="font-weight: bold;">Result : </span>
            <span class="result-data">-</span>
        </div>

        
        <script language="javascript" src="js/jquery-autocomplete-action.js"></script>
    </body>
</html>
  1. เขียนคำสั่ง JavaScript ในการรับคำสั่ง jQuery UI Autocomplete jquery-autocomplete-action.js
$(function(){
    $("#country").autocomplete({
        source: function(request,response){
            $.getJSON("ajaxCountry.php?keyword=" + request.term,function(data){
                if(data!=null){
                    response($.map(data, function(item){
                        return {
                            label: item.country_id + " - " + item.country,
                            value: item.country,
                            id: item.country_id
                        };
                    }));
                }
            });
        },
        select: function(event,ui){
            $("span.result-data").html(ui.item.label);
        }
    });
});
  1. เขียนไฟล์รับคำสั่ง ajax เพื่อดึงข้อมูลฐานข้อมูล ajaxCountry.php
<?php
	include_once 'config.inc.php';
	$conn = mysql_connect($config['db_server'], $config['db_username'], $config['db_password']) or die("Connect Failed");
	mysql_select_db($config['db_name'], $conn);
	mysql_query("SET NAMES UTF8");
	$keyword = $_GET["keyword"];
	$sql = " select * from country where ";
	$sql .= " country_id like '%".mysql_real_escape_string($keyword)."%' ";
	$sql .= " or country like '%".mysql_real_escape_string($keyword)."%' ";
	$sql .= " order by country_id asc, country asc ";
	$sql .= " limit 0,10 ";
	$query = mysql_query($sql);
	$num = mysql_num_rows($query);
	$resultData = array();
	if($num > 0){
        while($rs = mysql_fetch_assoc($query)){
            array_push($resultData,$rs);
        }
    }
    echo json_encode($resultData);
  1. จากหน้า index.php จะมีการนำเข้าไฟล์ jQuery, jQuery Migration, jQuery UI และ CSS นะครับให้ไปหาไฟล์นี้จาก link ดังนี้นะครับ หรือจะเอาตัวอย่างไฟล์ได้จากด้านล่างบทเรียนครับ

 

รูปแสดงผลการทำงาน
autocomplete-result1

autocomplete-result2

autocomplete-result3

สรุป : คงจะเป็นประโยชน์ไม่น้อยนะครับ สำหรับคนที่ต้องการศึกษาวิธีทำ สามารถเอาไปประยุกต์ใช้งานได้นะครับ แบบตัวอย่างนี้สำหรับผู้ที่มีพื้นฐานด้านการเขียน PHP และ jQuery บ้างแล้วนะครับ ถ้ายังไม่ถนัดให้ลองไปศึกษาพื้นฐานในเว็บไซต์นี้ได้ ส่วนตัวอย่าง code ท่านสามารถดาวน์โหลดได้จากกล่องข้างล่างนี้นะครับ ขอให้มีความสุขกับการเขียนโปรแกรมครับ /9Boy ชอบอย่างลืมกด Like และ Share ใน Fanpage นะครับ
ความคิดเห็น
(มีผู้เข้าชม 2,623 ครั้ง, 1 ผู้เข้าชมในวันนี้)

Related posts