Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar membuat sebuah form autocomplete dengan JQuery PHP dan MySQL. Autocomplete JQuery merupakan fitur untuk memberikan suggestion atau saran data yang akan di inputkan, dengan fitur ini pengguna akan di permudah dalam menginputkan data dalam form.
Membuat Autocomplete dengan JQuery MySQL dan PHP
Pertama-tama kita buat sebuah database nya terlebih dahulu. Kita ambil contoh database untuk menyimpan data semua nama-nama Negara.
CREATE DATABASE `db_country`;
USE `db_country`;
CREATE TABLE `country` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`country_code` varchar(2) NOT NULL DEFAULT '',
`country_name` varchar(100) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
);
-- ----------------------------
-- Records of country
-- ----------------------------
INSERT INTO `country` VALUES ('1', 'AF', 'Afghanistan');
INSERT INTO `country` VALUES ('2', 'AL', 'Albania');
INSERT INTO `country` VALUES ('3', 'DZ', 'Algeria');
INSERT INTO `country` VALUES ('4', 'DS', 'American Samoa');
INSERT INTO `country` VALUES ('5', 'AD', 'Andorra');
INSERT INTO `country` VALUES ('6', 'AO', 'Angola');
INSERT INTO `country` VALUES ('7', 'AI', 'Anguilla');
INSERT INTO `country` VALUES ('8', 'AQ', 'Antarctica');
INSERT INTO `country` VALUES ('9', 'AG', 'Antigua and Barbuda');
INSERT INTO `country` VALUES ('10', 'AR', 'Argentina');
INSERT INTO `country` VALUES ('11', 'AM', 'Armenia');
INSERT INTO `country` VALUES ('12', 'AW', 'Aruba');
INSERT INTO `country` VALUES ('13', 'AU', 'Australia');
INSERT INTO `country` VALUES ('14', 'AT', 'Austria');
INSERT INTO `country` VALUES ('15', 'AZ', 'Azerbaijan');
INSERT INTO `country` VALUES ('16', 'BS', 'Bahamas');
INSERT INTO `country` VALUES ('17', 'BH', 'Bahrain');
INSERT INTO `country` VALUES ('18', 'BD', 'Bangladesh');
INSERT INTO `country` VALUES ('19', 'BB', 'Barbados');
INSERT INTO `country` VALUES ('20', 'BY', 'Belarus');
INSERT INTO `country` VALUES ('21', 'BE', 'Belgium');
INSERT INTO `country` VALUES ('22', 'BZ', 'Belize');
INSERT INTO `country` VALUES ('23', 'BJ', 'Benin');
INSERT INTO `country` VALUES ('24', 'BM', 'Bermuda');
INSERT INTO `country` VALUES ('25', 'BT', 'Bhutan');
INSERT INTO `country` VALUES ('26', 'BO', 'Bolivia');
INSERT INTO `country` VALUES ('27', 'BA', 'Bosnia and Herzegovina');
INSERT INTO `country` VALUES ('28', 'BW', 'Botswana');
INSERT INTO `country` VALUES ('29', 'BV', 'Bouvet Island');
INSERT INTO `country` VALUES ('30', 'BR', 'Brazil');
INSERT INTO `country` VALUES ('31', 'IO', 'British Indian Ocean Territory');
INSERT INTO `country` VALUES ('32', 'BN', 'Brunei Darussalam');
INSERT INTO `country` VALUES ('33', 'BG', 'Bulgaria');
INSERT INTO `country` VALUES ('34', 'BF', 'Burkina Faso');
INSERT INTO `country` VALUES ('35', 'BI', 'Burundi');
INSERT INTO `country` VALUES ('36', 'KH', 'Cambodia');
INSERT INTO `country` VALUES ('37', 'CM', 'Cameroon');
INSERT INTO `country` VALUES ('38', 'CA', 'Canada');
INSERT INTO `country` VALUES ('39', 'CV', 'Cape Verde');
INSERT INTO `country` VALUES ('40', 'KY', 'Cayman Islands');
INSERT INTO `country` VALUES ('41', 'CF', 'Central African Republic');
INSERT INTO `country` VALUES ('42', 'TD', 'Chad');
INSERT INTO `country` VALUES ('43', 'CL', 'Chile');
INSERT INTO `country` VALUES ('44', 'CN', 'China');
INSERT INTO `country` VALUES ('45', 'CX', 'Christmas Island');
INSERT INTO `country` VALUES ('46', 'CC', 'Cocos (Keeling) Islands');
INSERT INTO `country` VALUES ('47', 'CO', 'Colombia');
INSERT INTO `country` VALUES ('48', 'KM', 'Comoros');
INSERT INTO `country` VALUES ('49', 'CD', 'Democratic Republic of the Congo');
INSERT INTO `country` VALUES ('50', 'CG', 'Republic of Congo');
INSERT INTO `country` VALUES ('51', 'CK', 'Cook Islands');
INSERT INTO `country` VALUES ('52', 'CR', 'Costa Rica');
INSERT INTO `country` VALUES ('53', 'HR', 'Croatia (Hrvatska)');
INSERT INTO `country` VALUES ('54', 'CU', 'Cuba');
INSERT INTO `country` VALUES ('55', 'CY', 'Cyprus');
INSERT INTO `country` VALUES ('56', 'CZ', 'Czech Republic');
INSERT INTO `country` VALUES ('57', 'DK', 'Denmark');
INSERT INTO `country` VALUES ('58', 'DJ', 'Djibouti');
INSERT INTO `country` VALUES ('59', 'DM', 'Dominica');
INSERT INTO `country` VALUES ('60', 'DO', 'Dominican Republic');
INSERT INTO `country` VALUES ('61', 'TP', 'East Timor');
INSERT INTO `country` VALUES ('62', 'EC', 'Ecuador');
INSERT INTO `country` VALUES ('63', 'EG', 'Egypt');
INSERT INTO `country` VALUES ('64', 'SV', 'El Salvador');
INSERT INTO `country` VALUES ('65', 'GQ', 'Equatorial Guinea');
INSERT INTO `country` VALUES ('66', 'ER', 'Eritrea');
INSERT INTO `country` VALUES ('67', 'EE', 'Estonia');
INSERT INTO `country` VALUES ('68', 'ET', 'Ethiopia');
INSERT INTO `country` VALUES ('69', 'FK', 'Falkland Islands (Malvinas)');
INSERT INTO `country` VALUES ('70', 'FO', 'Faroe Islands');
INSERT INTO `country` VALUES ('71', 'FJ', 'Fiji');
INSERT INTO `country` VALUES ('72', 'FI', 'Finland');
INSERT INTO `country` VALUES ('73', 'FR', 'France');
INSERT INTO `country` VALUES ('74', 'FX', 'France, Metropolitan');
INSERT INTO `country` VALUES ('75', 'GF', 'French Guiana');
INSERT INTO `country` VALUES ('76', 'PF', 'French Polynesia');
INSERT INTO `country` VALUES ('77', 'TF', 'French Southern Territories');
INSERT INTO `country` VALUES ('78', 'GA', 'Gabon');
INSERT INTO `country` VALUES ('79', 'GM', 'Gambia');
INSERT INTO `country` VALUES ('80', 'GE', 'Georgia');
INSERT INTO `country` VALUES ('81', 'DE', 'Germany');
INSERT INTO `country` VALUES ('82', 'GH', 'Ghana');
INSERT INTO `country` VALUES ('83', 'GI', 'Gibraltar');
INSERT INTO `country` VALUES ('84', 'GK', 'Guernsey');
INSERT INTO `country` VALUES ('85', 'GR', 'Greece');
INSERT INTO `country` VALUES ('86', 'GL', 'Greenland');
INSERT INTO `country` VALUES ('87', 'GD', 'Grenada');
INSERT INTO `country` VALUES ('88', 'GP', 'Guadeloupe');
INSERT INTO `country` VALUES ('89', 'GU', 'Guam');
INSERT INTO `country` VALUES ('90', 'GT', 'Guatemala');
INSERT INTO `country` VALUES ('91', 'GN', 'Guinea');
INSERT INTO `country` VALUES ('92', 'GW', 'Guinea-Bissau');
INSERT INTO `country` VALUES ('93', 'GY', 'Guyana');
INSERT INTO `country` VALUES ('94', 'HT', 'Haiti');
INSERT INTO `country` VALUES ('95', 'HM', 'Heard and Mc Donald Islands');
INSERT INTO `country` VALUES ('96', 'HN', 'Honduras');
INSERT INTO `country` VALUES ('97', 'HK', 'Hong Kong');
INSERT INTO `country` VALUES ('98', 'HU', 'Hungary');
INSERT INTO `country` VALUES ('99', 'IS', 'Iceland');
INSERT INTO `country` VALUES ('100', 'IN', 'India');
INSERT INTO `country` VALUES ('101', 'IM', 'Isle of Man');
INSERT INTO `country` VALUES ('102', 'ID', 'Indonesia');
INSERT INTO `country` VALUES ('103', 'IR', 'Iran (Islamic Republic of)');
INSERT INTO `country` VALUES ('104', 'IQ', 'Iraq');
INSERT INTO `country` VALUES ('105', 'IE', 'Ireland');
INSERT INTO `country` VALUES ('106', 'IL', 'Israel');
INSERT INTO `country` VALUES ('107', 'IT', 'Italy');
INSERT INTO `country` VALUES ('108', 'CI', 'Ivory Coast');
INSERT INTO `country` VALUES ('109', 'JE', 'Jersey');
INSERT INTO `country` VALUES ('110', 'JM', 'Jamaica');
INSERT INTO `country` VALUES ('111', 'JP', 'Japan');
INSERT INTO `country` VALUES ('112', 'JO', 'Jordan');
INSERT INTO `country` VALUES ('113', 'KZ', 'Kazakhstan');
INSERT INTO `country` VALUES ('114', 'KE', 'Kenya');
INSERT INTO `country` VALUES ('115', 'KI', 'Kiribati');
INSERT INTO `country` VALUES ('116', 'KP', 'Korea, Democratic People\'s Republic of');
INSERT INTO `country` VALUES ('117', 'KR', 'Korea, Republic of');
INSERT INTO `country` VALUES ('118', 'XK', 'Kosovo');
INSERT INTO `country` VALUES ('119', 'KW', 'Kuwait');
INSERT INTO `country` VALUES ('120', 'KG', 'Kyrgyzstan');
INSERT INTO `country` VALUES ('121', 'LA', 'Lao People\'s Democratic Republic');
INSERT INTO `country` VALUES ('122', 'LV', 'Latvia');
INSERT INTO `country` VALUES ('123', 'LB', 'Lebanon');
INSERT INTO `country` VALUES ('124', 'LS', 'Lesotho');
INSERT INTO `country` VALUES ('125', 'LR', 'Liberia');
INSERT INTO `country` VALUES ('126', 'LY', 'Libyan Arab Jamahiriya');
INSERT INTO `country` VALUES ('127', 'LI', 'Liechtenstein');
INSERT INTO `country` VALUES ('128', 'LT', 'Lithuania');
INSERT INTO `country` VALUES ('129', 'LU', 'Luxembourg');
INSERT INTO `country` VALUES ('130', 'MO', 'Macau');
INSERT INTO `country` VALUES ('131', 'MK', 'North Macedonia');
INSERT INTO `country` VALUES ('132', 'MG', 'Madagascar');
INSERT INTO `country` VALUES ('133', 'MW', 'Malawi');
INSERT INTO `country` VALUES ('134', 'MY', 'Malaysia');
INSERT INTO `country` VALUES ('135', 'MV', 'Maldives');
INSERT INTO `country` VALUES ('136', 'ML', 'Mali');
INSERT INTO `country` VALUES ('137', 'MT', 'Malta');
INSERT INTO `country` VALUES ('138', 'MH', 'Marshall Islands');
INSERT INTO `country` VALUES ('139', 'MQ', 'Martinique');
INSERT INTO `country` VALUES ('140', 'MR', 'Mauritania');
INSERT INTO `country` VALUES ('141', 'MU', 'Mauritius');
INSERT INTO `country` VALUES ('142', 'TY', 'Mayotte');
INSERT INTO `country` VALUES ('143', 'MX', 'Mexico');
INSERT INTO `country` VALUES ('144', 'FM', 'Micronesia, Federated States of');
INSERT INTO `country` VALUES ('145', 'MD', 'Moldova, Republic of');
INSERT INTO `country` VALUES ('146', 'MC', 'Monaco');
INSERT INTO `country` VALUES ('147', 'MN', 'Mongolia');
INSERT INTO `country` VALUES ('148', 'ME', 'Montenegro');
INSERT INTO `country` VALUES ('149', 'MS', 'Montserrat');
INSERT INTO `country` VALUES ('150', 'MA', 'Morocco');
INSERT INTO `country` VALUES ('151', 'MZ', 'Mozambique');
INSERT INTO `country` VALUES ('152', 'MM', 'Myanmar');
INSERT INTO `country` VALUES ('153', 'NA', 'Namibia');
INSERT INTO `country` VALUES ('154', 'NR', 'Nauru');
INSERT INTO `country` VALUES ('155', 'NP', 'Nepal');
INSERT INTO `country` VALUES ('156', 'NL', 'Netherlands');
INSERT INTO `country` VALUES ('157', 'AN', 'Netherlands Antilles');
INSERT INTO `country` VALUES ('158', 'NC', 'New Caledonia');
INSERT INTO `country` VALUES ('159', 'NZ', 'New Zealand');
INSERT INTO `country` VALUES ('160', 'NI', 'Nicaragua');
INSERT INTO `country` VALUES ('161', 'NE', 'Niger');
INSERT INTO `country` VALUES ('162', 'NG', 'Nigeria');
INSERT INTO `country` VALUES ('163', 'NU', 'Niue');
INSERT INTO `country` VALUES ('164', 'NF', 'Norfolk Island');
INSERT INTO `country` VALUES ('165', 'MP', 'Northern Mariana Islands');
INSERT INTO `country` VALUES ('166', 'NO', 'Norway');
INSERT INTO `country` VALUES ('167', 'OM', 'Oman');
INSERT INTO `country` VALUES ('168', 'PK', 'Pakistan');
INSERT INTO `country` VALUES ('169', 'PW', 'Palau');
INSERT INTO `country` VALUES ('170', 'PS', 'Palestine');
INSERT INTO `country` VALUES ('171', 'PA', 'Panama');
INSERT INTO `country` VALUES ('172', 'PG', 'Papua New Guinea');
INSERT INTO `country` VALUES ('173', 'PY', 'Paraguay');
INSERT INTO `country` VALUES ('174', 'PE', 'Peru');
INSERT INTO `country` VALUES ('175', 'PH', 'Philippines');
INSERT INTO `country` VALUES ('176', 'PN', 'Pitcairn');
INSERT INTO `country` VALUES ('177', 'PL', 'Poland');
INSERT INTO `country` VALUES ('178', 'PT', 'Portugal');
INSERT INTO `country` VALUES ('179', 'PR', 'Puerto Rico');
INSERT INTO `country` VALUES ('180', 'QA', 'Qatar');
INSERT INTO `country` VALUES ('181', 'RE', 'Reunion');
INSERT INTO `country` VALUES ('182', 'RO', 'Romania');
INSERT INTO `country` VALUES ('183', 'RU', 'Russian Federation');
INSERT INTO `country` VALUES ('184', 'RW', 'Rwanda');
INSERT INTO `country` VALUES ('185', 'KN', 'Saint Kitts and Nevis');
INSERT INTO `country` VALUES ('186', 'LC', 'Saint Lucia');
INSERT INTO `country` VALUES ('187', 'VC', 'Saint Vincent and the Grenadines');
INSERT INTO `country` VALUES ('188', 'WS', 'Samoa');
INSERT INTO `country` VALUES ('189', 'SM', 'San Marino');
INSERT INTO `country` VALUES ('190', 'ST', 'Sao Tome and Principe');
INSERT INTO `country` VALUES ('191', 'SA', 'Saudi Arabia');
INSERT INTO `country` VALUES ('192', 'SN', 'Senegal');
INSERT INTO `country` VALUES ('193', 'RS', 'Serbia');
INSERT INTO `country` VALUES ('194', 'SC', 'Seychelles');
INSERT INTO `country` VALUES ('195', 'SL', 'Sierra Leone');
INSERT INTO `country` VALUES ('196', 'SG', 'Singapore');
INSERT INTO `country` VALUES ('197', 'SK', 'Slovakia');
INSERT INTO `country` VALUES ('198', 'SI', 'Slovenia');
INSERT INTO `country` VALUES ('199', 'SB', 'Solomon Islands');
INSERT INTO `country` VALUES ('200', 'SO', 'Somalia');
INSERT INTO `country` VALUES ('201', 'ZA', 'South Africa');
INSERT INTO `country` VALUES ('202', 'GS', 'South Georgia South Sandwich Islands');
INSERT INTO `country` VALUES ('203', 'SS', 'South Sudan');
INSERT INTO `country` VALUES ('204', 'ES', 'Spain');
INSERT INTO `country` VALUES ('205', 'LK', 'Sri Lanka');
INSERT INTO `country` VALUES ('206', 'SH', 'St. Helena');
INSERT INTO `country` VALUES ('207', 'PM', 'St. Pierre and Miquelon');
INSERT INTO `country` VALUES ('208', 'SD', 'Sudan');
INSERT INTO `country` VALUES ('209', 'SR', 'Suriname');
INSERT INTO `country` VALUES ('210', 'SJ', 'Svalbard and Jan Mayen Islands');
INSERT INTO `country` VALUES ('211', 'SZ', 'Swaziland');
INSERT INTO `country` VALUES ('212', 'SE', 'Sweden');
INSERT INTO `country` VALUES ('213', 'CH', 'Switzerland');
INSERT INTO `country` VALUES ('214', 'SY', 'Syrian Arab Republic');
INSERT INTO `country` VALUES ('215', 'TW', 'Taiwan');
INSERT INTO `country` VALUES ('216', 'TJ', 'Tajikistan');
INSERT INTO `country` VALUES ('217', 'TZ', 'Tanzania, United Republic of');
INSERT INTO `country` VALUES ('218', 'TH', 'Thailand');
INSERT INTO `country` VALUES ('219', 'TG', 'Togo');
INSERT INTO `country` VALUES ('220', 'TK', 'Tokelau');
INSERT INTO `country` VALUES ('221', 'TO', 'Tonga');
INSERT INTO `country` VALUES ('222', 'TT', 'Trinidad and Tobago');
INSERT INTO `country` VALUES ('223', 'TN', 'Tunisia');
INSERT INTO `country` VALUES ('224', 'TR', 'Turkey');
INSERT INTO `country` VALUES ('225', 'TM', 'Turkmenistan');
INSERT INTO `country` VALUES ('226', 'TC', 'Turks and Caicos Islands');
INSERT INTO `country` VALUES ('227', 'TV', 'Tuvalu');
INSERT INTO `country` VALUES ('228', 'UG', 'Uganda');
INSERT INTO `country` VALUES ('229', 'UA', 'Ukraine');
INSERT INTO `country` VALUES ('230', 'AE', 'United Arab Emirates');
INSERT INTO `country` VALUES ('231', 'GB', 'United Kingdom');
INSERT INTO `country` VALUES ('232', 'US', 'United States');
INSERT INTO `country` VALUES ('233', 'UM', 'United States minor outlying islands');
INSERT INTO `country` VALUES ('234', 'UY', 'Uruguay');
INSERT INTO `country` VALUES ('235', 'UZ', 'Uzbekistan');
INSERT INTO `country` VALUES ('236', 'VU', 'Vanuatu');
INSERT INTO `country` VALUES ('237', 'VA', 'Vatican City State');
INSERT INTO `country` VALUES ('238', 'VE', 'Venezuela');
INSERT INTO `country` VALUES ('239', 'VN', 'Vietnam');
INSERT INTO `country` VALUES ('240', 'VG', 'Virgin Islands (British)');
INSERT INTO `country` VALUES ('241', 'VI', 'Virgin Islands (U.S.)');
INSERT INTO `country` VALUES ('242', 'WF', 'Wallis and Futuna Islands');
INSERT INTO `country` VALUES ('243', 'EH', 'Western Sahara');
INSERT INTO `country` VALUES ('244', 'YE', 'Yemen');
INSERT INTO `country` VALUES ('245', 'ZM', 'Zambia');
INSERT INTO `country` VALUES ('246', 'ZW', 'Zimbabwe');
Selanjutnya buat file data.php untuk menampung data nama negara dari databse db_country dengan format .json.
<?php
header('Content-Type: application/json; charset=utf8');
$server = "localhost";
$user = "root";
$pass = "";
$dbname = "db_country";
//koneksi ke database db_country
$conn = mysqli_connect($server, $user, $pass, $dbname);
if(!$conn){
die("Connection Failed: " .mysqli_connect_error());
}
$term = trim(strip_tags($_GET['term']));
//query untuk menampilkan data dari tabel country
$query = mysqli_query($conn, "SELECT * FROM country WHERE country_name LIKE '%$term%' ");
$array=array();
//looping data
while($data=mysqli_fetch_assoc($query)){
$row['value']=$data['country_name'];
//buat array yang nantinya akan di konversi ke json
array_push($array, $row);
}
//mengubah data object menjadi data json
echo json_encode($array);
?>
Terakhir buat file index.php untuk menampilkan form nama negara dengan autocomplete.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>maribelajarcoding.com - Membuat Autocomplete JQuery Database Mysql PHP</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#nama_negara" ).autocomplete({
source: "data.php"
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form method="POST">
<label >Nama Negara: </label>
<input type="text" id="nama_negara">
</form>
</div>
</body>
</html>
Tutorial membuat form autocomplete dengan JQuery MySQL dan PHP telah selesai. Sekian, semoga bermanfaat.
Source Code:
autocomplete.rar
Source Code:
Related Search:
Membuat Autocomplete PHP
Membuat Autocomplete dengan Javascript
PHP Autocomplete Textbox dari Database
JQuery Autocomplete Ajax PHP