AngularJS - 搜索標籤

你好，有志者！今天，我們將深入AngularJS的精彩世界，學習如何創建一個搜索標籤。作為你鄰居的友好計算機老師，我在這裡指導你一步一步地走過這個旅程。所以，來一杯咖啡（或你喜歡的飲料），我們開始吧！

AngularJS - Search Tab

AngularJS 搜索標籤介紹

在我們投入代碼之前，讓我們先了解搜索標籤是什麼，以及它有什麼用處。想像一下，你正在建立一個有大量數據的網站，比如圖書館目錄或線上商店。搜索標籤使用戶能夠快速找到他們想要的东西，而不需要滾動無窮無盡的頁面。這就像有一個超級聰明的助手，可以立即為你提取所需的資訊！

建立我們的專案

首先，我們需要建立我們的專案。別擔心如果你以前從未做過這件事——我會一步一步地帶你走過！

步驟 1：引入 AngularJS 圖書

要使用AngularJS，我們需要在HTML文件中引入它的圖書。在你的HTML的<head>部分添加以下行：

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

這行代碼就像邀請AngularJS來我們的編碼派對。它給我們提供了將要使用的一切酷炫功能。

步驟 2：創建 HTML 結構

現在，讓我們創建我們搜索標籤的基本結構。它看起來像這樣：

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

讓我們分解一下：

ng-app="searchApp": 這告訴AngularJS這個div是我們的應用程序。
ng-controller="searchCtrl": 這將我們的HTML連接到我們即將創建的控制器。
ng-model="searchText": 這將輸入字段绑定到名為searchText的變量。
ng-repeat="item in items | filter:searchText": 這為我們的items數組中的每個元素創建一個列表項，並通過searchText過濾。

創建 AngularJS 控制器

現在，我們有了HTML結構，讓我們創建我們應用的核心——控制器！

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

app.controller('searchCtrl', function($scope) {
$scope.items = ['蘋果', '香蕉', '櫻桃', '日期', '接骨木莓', '無花果', '葡萄'];
});

這裡發生了什麼：

我們創建了一個名為searchApp的AngularJS模塊。
我們定義了一個名為searchCtrl的控制器。
在控制器內部，我們創建了一個我們想要搜索的項目數組。

如何讓它們一起工作

當你在搜索框中輸入時，AngularJS會自動更新searchText變量。然後ng-repeat指令使用這個searchText來過濾items數組。這就像魔法一樣，但其實只是AngularJS在背後默默工作！

增強我們的搜索標籤

現在我們有了基本的搜索功能，讓我們添加一些花絮！

不区分大小寫的搜索

為了讓我們的搜索不區分大小寫（這樣"蘋果"可以匹配"蘋果"），我們可以修改我們的過濾器：

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

自定義過濾器函數

對於更複雜的過濾，我們可以創建一個自定義過濾器函數：

app.controller('searchCtrl', function($scope) {
$scope.items = ['蘋果', '香蕉', '櫻桃', '日期', '接骨木莓', '無花果', '葡萄'];

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

然後在我們的HTML中：

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

這個自定義過濾器允許我們根據需要實現更複雜的搜索邏輯。

為我們的搜索標籤添加樣式

我們不要忘了讓我們的搜索標籤看起來好看！這裡有一些CSS來美化它：

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

不要忘記將search-container類添加到你的主要div！

組合所有部分

這是我們完整的HTML文件，包含了所有部分：

<!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樣式在這裡 */
</style>
</head>
<body ng-controller="searchCtrl">
<div class="search-container">
<input type="text" ng-model="searchText" placeholder="搜索...">
<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 = ['蘋果', '香蕉', '櫻桃', '日期', '接骨木莓', '無花果', '葡萄'];
$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});
</script>
</body>
</html>

結論

恭喜你！你剛剛使用AngularJS建立了一個功能性的搜索標籤。從建立專案到實現自定義過濾器和添加樣式，你已經走了很長一段路。記住，熟能生巧，所以不要害怕嘗試不同的數據集或為你的搜索標籤添加更多的功能。

這裡是一個表格，總結了我們使用的主要AngularJS指令和概念：

指令/概念	目的
ng-app	定義AngularJS應用程序
ng-controller	指定應用程序的控制器
ng-model	將輸入绑定到變量
ng-repeat	遍歷集合
filter	根據條件過濾數組
自定義過濾器函數	允許更複雜的過濾邏輯

繼續編程，保持好奇心，並且愉快地搜索！

Credits: Image by storyset