AngularJS - Search Tab

Hai, para programer yang sedang belajar! Hari ini, kita akan masuk ke dunia yang menarik AngularJS dan belajar membuat tab pencarian. Sebagai guru komputer tetangga yang ramah, saya disini untuk menggイド Anda dalam perjalanan ini langkah demi langkah. Jadi, ambil secangkir kopi (atau minuman favorit Anda), dan mari kita mulai!

Pengenalan ke Tab Pencarian AngularJS

Sebelum kita masuk ke kode, mari kita pahami apa itu tab pencarian dan mengapa itu berguna. Bayangkan Anda sedang membuat website dengan jumlah data besar, seperti katalog perpustakaan atau toko online. Tab pencarian memungkinkan pengguna mencari apa yang mereka cari secara cepat tanpa perlu menggulir halaman yang tak terhitung. Itu seperti memiliki asisten super cerdas yang dapat mengambil informasi yang Anda butuhkan secara instan!

Menyiapkan Proyek

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

Langkah 1: Sertakan Library AngularJS

Untuk menggunakan AngularJS, kita perlu menyertakan librarynya dalam file HTML kita. Tambahkan baris berikut di bagian <head> dari 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. Ini memberikan akses ke semua fitur menarik yang kita akan gunakan.

Langkah 2: Buat Struktur HTML

Sekarang, mari kita buat struktur dasar tab pencarian kita. Ini adalah wajahnya:

<div ng-app="searchApp" ng-controller="searchCtrl">
<input type="text" ng-model="searchText" placeholder="Search...">
<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 akan kita buat sebentar lagi.
ng-model="searchText": Ini membind input field ke variabel 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 bernama searchApp.
Kita tentukan controller bernama searchCtrl.
Dalam controller, kita membuat array items yang kita ingin cari.

Bagaimana Semua Itu Bertemu

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

Menengahkan Tab Pencarian

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

Pencarian Tak Sensitif terhadap Huruf Besar/Kecil

Untuk membuat pencarian kita tak sensitif terhadap huruf besar/kecil (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.

Menyusun Tab Pencarian

Jangan lupa tentang membuat tab pencarian kita terlihat bagus! Ini adalah beberapa CSS untuk memperbaiki penampilannya:

<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!

Menempatkan Semua Itu bersama

Ini adalah file HTML lengkap kita dengan semua bagian di tempatkan:

<!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="Search...">
<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 telah membuat tab pencarian yang berfungsi menggunakan AngularJS. Dari menyiapkan proyek hingga mengimplementasikan filter tersuai dan menambahkan gaya, Anda telah mencakup banyak hal. Ingat, latihan membuat Anda sempurna, jadi jangan takut untuk mencoba data yang berbeda atau menambahkan fitur lain ke tab pencarian Anda.

Ini adalah tabel yang menggabungkan direktif/d концепт AngularJS utama yang kita gunakan:

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

Tetap mengoding, tetap bersemangat, dan selamat mencari!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Formulir Pesanan

Tutorial Selanjutnya:

AngularJS - Aplikasi Seret