-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (129 loc) · 7.75 KB
/
index.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.11.3/datatables.min.css" />
<title>Cari Kodepos</title>
</head>
<body>
<div class="container p-5">
<div class="row mb-3">
<form id="cari" method="get">
<label for="kec" class="col-sm-2 col-form-label">Kecamatan :</label>
<div class="col-sm-8">
<input type="text" id="keyword" class="form-control mb-3" id="kec">
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary mb-3 px-5">Cari</button>
</div>
</form>
</div>
<div class="row mb-3 small" id="info" style="display: none;">
Klik tombol hijau kode pos untuk meng-copy.<br>
Jika hasil terlalu banyak, ada filter di bawah tiap kolom.
</div>
<div class="table-responsive">
<table id="tabel" class="table table-sm table-striped small" width="100%" style="display: none;">
<tfoot>
<tr>
<th>Kode Pos</th>
<th>Kelurahan</th>
<th>Kecamatan</th>
<th>Kota</th>
<th>Provinsi</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.11.3/datatables.min.js"></script>
<script>
$(document).ready(function () {
// Fungsi submit tombol cari
$(document).on('submit', '#cari', function (event) {
// Cegah fungsi default submit form agar berjalan sesuai keinginan kita.
event.preventDefault()
// Minimal 3 karakter untuk mendapat hasil yang tidak terlalu banyak.
if ($('#keyword').val().length < 3) {
alert('Ketik minimal 3 karakter')
} else {
// encode url string kecamatan yang akan dicari
var keyword = encodeURI($('#keyword').val())
// Url endpoint & parameter API. Sisipkan variabel 'keyword' dalam url parameter 'query'.
// Sayangnya hanya satu opsi scope yang bisa dicari: '0' = semua, 'province' = provinsi, 'city' = kab/kota, 'disctrict' = kecamatan, 'urban' = 'kelurahan'
// exact bernilai true/false, jika true maka hasil pencarian hanya yang sama persis dengan keyword
// limit=0 berarti tanpa limit, pagination dihandle oleh DataTable. Tidak ada dokumentasi resmi, mungkin ada opsi offset/pagination
var url = 'https://api.kodeposku.com/search?query=' + keyword + '&limit=0&scope=district&exact=false'
/**
* Proses kirim request dan ambil data dari API kodeposku.com
*
* Step:
* 1. Kirim request dengan $.getJSON(). Dokumentasi https://api.jquery.com/jquery.getjson/
* 2. Tampilkan elemen-elemen yang dibutuhkan.
* 3. Buat tabel dengan bantuan DataTable (https://datatables.net/manual/) dan render kolom pertama menjadi tombol copy kodepos dengan bantuan Clipboard JS.
*/
$.getJSON(url, function (data) { // function(data){...} hanya dijalankan jika get API berhasil
// tampilkan elemen #info & #table (sebelumnya display:none)
$('#info').show()
$('#tabel').show()
// destroy tabel jika tabel sudah digenerate dari pencarian sebelumnya
if ($.fn.dataTable.isDataTable('#tabel')) {
$("#tabel").dataTable().fnDestroy()
}
// generate dan modifikasi tampilan tabel
$('#tabel').DataTable({
dom: "tip", // Menampilkan beberapa elemen saja (https://datatables.net/reference/option/dom/)
data: data.results, // Data yang digunakan dalam tabel adalah 'data' json pada getJSON. Dipersempit pada subdata 'results' (menyesuaikan struktur json dari kodeposku.com)
columns: [ // Mapping urutan data json dalam tabel
{ title: "Kode Pos", data: "postal_code" },
{ title: "Kelurahan", data: "urban" },
{ title: "Kecamatan", data: "district" },
{ title: "Kota", data: "city" },
{ title: "Provinsi", data: "province" },
],
columnDefs: [
{
// Ubah kolom pertama render tombol dengan fungsi copy (ClipboardJS)
render: function (data, type, row) {
return '<button class="btn btn-sm btn-success copy" data-clipboard-text="' + data + '">' + data + '</button>'
},
targets: 0 // target kolom yang dirender (0 = kolom pertama)
}
],
// Buat dropdown filter di bawah tabel (https://datatables.net/examples/api/multi_filter_select.html)
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
})
})
}
})
// Buat instance ClipboardJS untuk diterapkan pada elemen dengan class="copy"
new ClipboardJS('.copy');
})
</script>
</body>
</html>