AngularJS - Tìm kiếm Tab

Xin chào, các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng nhau lặn sâu vào thế giới đầy thú vị của AngularJS và học cách tạo một tab tìm kiếm. Là người dạy máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn từng bước trong hành trình này. Vậy, hãy lấy một tách cà phê (hoặc đồ uống yêu thích của bạn), và chúng ta cùng bắt đầu!

AngularJS - Search Tab

Giới thiệu về Tab Tìm kiếm AngularJS

Trước khi chúng ta nhảy vào mã, hãy hiểu什么是 một tab tìm kiếm và tại sao nó lại hữu ích. Hãy tưởng tượng bạn đang xây dựng một trang web với một lượng lớn dữ liệu, như một mục lục thư viện hoặc một cửa hàng trực tuyến. Một tab tìm kiếm cho phép người dùng nhanh chóng tìm thấy những gì họ đang tìm kiếm mà không cần cuộn qua các trang không endl. Nó giống như có một trợ lý siêu thông minh có thể ngay lập tức lấy thông tin bạn cần!

Cài đặt Dự án của Chúng ta

Trước tiên, chúng ta cần cài đặt dự án của mình. Đừng lo lắng nếu bạn chưa bao giờ làm điều này trước đây - tôi sẽ hướng dẫn bạn!

Bước 1: Bao gồm Thư viện AngularJS

Để sử dụng AngularJS, chúng ta cần bao gồm thư viện của nó trong tệp HTML. Thêm dòng sau trong phần <head> của tệp HTML của bạn:

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

Dòng này giống như mời AngularJS đến dự tiệc lập trình của chúng ta. Nó cho phép chúng ta tiếp cận tất cả các tính năng tuyệt vời mà chúng ta sẽ sử dụng.

Bước 2: Tạo Cấu trúc HTML

Bây giờ, hãy tạo cấu trúc cơ bản của tab tìm kiếm của chúng ta. Dưới đây là cách nó trông như thế nào:

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

Hãy phân tích này:

ng-app="searchApp": Điều này告诉 AngularJS rằng div này là ứng dụng của chúng ta.
ng-controller="searchCtrl": Điều này kết nối HTML của chúng ta với một controller mà chúng ta sẽ tạo sớm.
ng-model="searchText": Điều này liên kết trường nhập với một biến叫做 searchText.
ng-repeat="item in items | filter:searchText": Điều này tạo một mục danh sách cho mỗi phần tử trong mảng items, được lọc theo searchText.

Tạo Controller AngularJS

Bây giờ chúng ta đã có cấu trúc HTML, hãy tạo não của ứng dụng của chúng ta - controller!

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

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

Đây là những gì đang xảy ra:

Chúng ta tạo một module AngularJS叫做 searchApp.
Chúng ta xác định một controller tên là searchCtrl.
Trong controller, chúng ta tạo một mảng các mục mà chúng ta muốn tìm kiếm.

Cách Nó Hoạt Động Cùng Lại

Khi bạn gõ vào hộp tìm kiếm, AngularJS tự động cập nhật biến searchText. Lệnh ng-repeat sau đó sử dụng searchText để lọc mảng items. Nó giống như phép thuật, nhưng thực tế chỉ là AngularJS làm việc sau hậu trường!

Cải thiện Tab Tìm kiếm của Chúng ta

Bây giờ chúng ta đã có một tìm kiếm cơ bản hoạt động, hãy thêm một số tính năng!

Tìm kiếm Không Phân Büyük

Để làm cho tìm kiếm không phân biệt chữ hoa chữ thường (nên "apple" khớp với "Apple"), chúng ta có thể sửa bộ lọc của mình:

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

Hàm Lọc Tùy Chỉnh

Đối với việc lọc phức tạp hơn, chúng ta có thể tạo một hàm lọc tùy chỉnh:

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;
};
});

Sau đó trong HTML của chúng ta:

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

Hàm lọc tùy chỉnh này cho phép chúng ta thực hiện logic tìm kiếm phức tạp hơn nếu cần.

Định dạng Tab Tìm kiếm của Chúng ta

Hãy không quên làm cho tab tìm kiếm của chúng ta trông đẹp! Dưới đây là một số CSS để làm cho nó nổi bật hơn:

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

Đừng quên thêm lớp search-container vào div chính của bạn!

Kết hợp Tất cả lại

Dưới đây là tệp HTML hoàn chỉnh của chúng ta với tất cả các phần đã đặt:

<!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="Tìm kiếm...">
<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>

Kết luận

Chúc mừng! Bạn đã vừa xây dựng một tab tìm kiếm chức năng bằng AngularJS. Từ việc cài đặt dự án đến việc thực hiện bộ lọc tùy chỉnh và thêm một số phong cách, bạn đã đi qua rất nhiều nội dung. Nhớ rằng, thực hành làm nên完美, vì vậy đừng ngại thử nghiệm với các bộ dữ liệu khác nhau hoặc thêm nhiều tính năng hơn cho tab tìm kiếm của bạn.

Dưới đây là bảng tóm tắt các hướng dẫn AngularJS và khái niệm chúng ta đã sử dụng:

Hướng dẫn/Khái niệm	Mục đích
ng-app	Định nghĩa ứng dụng AngularJS
ng-controller	Chỉ định controller cho ứng dụng
ng-model	Liên kết trường nhập với biến
ng-repeat	Lặp qua một bộ dữ liệu
filter	Lọc một mảng dựa trên tiêu chí
hàm lọc tùy chỉnh	Cho phép logic lọc phức tạp hơn

Tiếp tục lập trình, hãy tò mò, và chúc bạn may mắn trong việc tìm kiếm!

Credits: Image by storyset

Hướng Dẫn Trước:

AngularJS - Biểu mẫu đặt hàng

Hướng Dẫn Tiếp Theo:

AngularJS - Ứng dụng Kéo