AngularJS - Tabar Cari

Hai, para pemrogram yang bersemangat! Hari ini, kita akan melihat dunia yang menarik AngularJS dan belajar bagaimana membuat tab cari. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengarahkan Anda dalam perjalanan ini langkah demi langkah. Jadi, ambil secangkir kopi (atau minuman favorit Anda), dan mari kita mulai!

AngularJS - Search Tab

Pengenalan ke Tab Cari AngularJS

Sebelum kita masuk ke kode, mari kita pahami apa itu tab cari dan mengapa itu berguna. Bayangkan Anda sedang membuat situs web dengan jumlah data besar, seperti katalog perpustakaan atau toko online. Tab cari memungkinkan pengguna untuk cepat menemukan apa yang mereka cari tanpa perlu menggeser halaman yang tak terbatas. Itu seperti memiliki asisten super cerdas yang dapat segera mengambil informasi yang Anda butuhkan!

Menyiapkan Proyek Kita

Pertama-tama, kita perlu mengatur proyek kita. Jangan khawatir jika Anda belum pernah melakukan ini sebelumnya - saya akan memandu Anda!

Langkah 1: Sertakan Pustaka AngularJS

Untuk menggunakan AngularJS, kita perlu menyertakan pustakanya di dalam file HTML kita. Tambahkan baris berikut di dalam bagian <head> file HTML Anda:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Baris ini seperti mengundang AngularJS ke pesta coding kita. Itu memberikan kita akses ke semua fitur menarik yang akan kita gunakan.

Langkah 2: Buat Struktur HTML

Sekarang, mari kita buat struktur dasar tab cari kita. Ini adalah penampilannya:

<div ng-app="searchApp" ng-controller="searchCtrl">
<input type="text" ng-model="searchText" placeholder="Cari...">
<ul>
<li ng-repeat="item in items | filter:searchText">{{item}}</li>
</ul>
</div>

mari kitauraikan ini:

ng-app="searchApp": Ini memberitahu AngularJS bahwa div ini adalah aplikasi kita.
ng-controller="searchCtrl": Ini menghubungkan HTML kita ke controller yang kita akan buat sebentar lagi.
ng-model="searchText": Ini mengikat field input ke variabel yang disebut searchText.
ng-repeat="item in items | filter:searchText": Ini membuat item daftar untuk setiap elemen dalam array items, difilter berdasarkan searchText.

Membuat Controller AngularJS

Sekarang kita memiliki struktur HTML, mari kita buat otak aplikasi kita - controller!

var app = angular.module('searchApp', []);

app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
});

Ini adalah apa yang terjadi:

Kita membuat module AngularJS yang disebut searchApp.
Kita tentukan controller bernama searchCtrl.
Di dalam controller, kita membuat array item yang kita ingin cari.

Bagaimana Semua Itu Bekerja Bersama

Ketika Anda mengetik di kotak cari, AngularJS secara otomatis memperbarui variabel searchText. Direktif ng-repeat kemudian menggunakan searchText ini untuk menyaring array items. Itu seperti magis, tapi itu sebenarnya hanya AngularJS yang melakukan halnya di belakang layar!

Menambahkan Fitur ke Tab Cari Kita

Sekarang kita memiliki pencarian dasar yang bekerja, mari kita tambahkan beberapa fitur tambahan!

Pencarian Tak Sensitif Huruf

Untuk membuat pencarian kita tak sensitif huruf (sehingga "apple" cocok dengan "Apple"), kita dapat memodifikasi filter kita:

<li ng-repeat="item in items | filter:searchText:ignoreCase">{{item}}</li>

Fungsi Filter Tersuai

Untuk penyaringan yang lebih kompleks, kita dapat membuat fungsi filter tersuai:

app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];

$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});

Lalu di HTML kita:

<li ng-repeat="item in items | filter:customFilter">{{item}}</li>

Filter tersuai ini memungkinkan kita untuk mengimplementasikan logika pencarian yang lebih kompleks jika diperlukan.

Menggayakan Tab Cari Kita

Jangan lupa membuat tab cari kita terlihat bagus! Ini adalah beberapa CSS untuk memperbaiki tingkatkan:

<style>
.search-container {
max-width: 300px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 8px;
background-color: #f1f1f1;
margin-bottom: 5px;
border-radius: 4px;
}
</style>

Jangan lupa menambahkan kelas search-container ke div utama Anda!

Menyatukan Semua Itu

Ini adalah file HTML lengkap kita dengan semua bagian yang ada:

<!DOCTYPE html>
<html ng-app="searchApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS styles here */
</style>
</head>
<body ng-controller="searchCtrl">
<div class="search-container">
<input type="text" ng-model="searchText" placeholder="Cari...">
<ul>
<li ng-repeat="item in items | filter:customFilter">{{item}}</li>
</ul>
</div>
<script>
var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});
</script>
</body>
</html>

Kesimpulan

Selamat! Anda baru saja membuat tab cari yang berfungsi menggunakan AngularJS. Dari menyiapkan proyek hingga mengimplementasikan filter tersuai dan menambahkan gaya, Anda telah melangkah jauh. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba data yang berbeda atau menambahkan fitur lain ke tab cari Anda.

Ini adalah tabel yang menggabungkan direktif dan konsep AngularJS utama yang kita gunakan:

Direktif/Konsep	Tujuan
ng-app	Menentukan AngularJS aplikasi
ng-controller	Menentukan controller untuk aplikasi
ng-model	Mengikat input ke variabel
ng-repeat	Mengulang daftar berdasarkan koleksi
filter	Menyaring array berdasarkan kriteria
fungsi filter tersuai	Memungkinkan penyaringan logika yang lebih kompleks

Tetap coding, tetap curiga, dan selamat mencari!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Borang Tempahan

Tutorial Seterusnya:

AngularJS - Aplikasi Seret