AngularJS - Панель поиска

Здравствуйте,野心勃勃的程序员们!今天，我们将进入AngularJS的精彩世界，学习如何创建一个搜索标签。作为您亲切的邻居计算机老师，我将引导您一步步完成这个旅程。所以，拿起一杯咖啡(或者你最喜欢的饮料)，让我们开始吧！

AngularJS - Search Tab

AngularJS Панель поиска - Введение

Прежде чем мы перейдем к коду, давайте поймем, что такое панель поиска и почему она полезна. Представьте, что вы создаете веб-сайт с большим количеством данных, например, каталог библиотеки или интернет-магазин. Панель поиска позволяет пользователям быстро находить то, что они ищут, не прокручивая бесконечные страницы. Это как иметь super-умного ассистента, который может мгновенно извлечь нужную вам информацию!

Настройка нашего проекта

Сначала нам нужно настроить наш проект. Не волнуйтесь, если вы никогда этого не делали раньше - я проведу вас через это!

Шаг 1: Включите библиотеку AngularJS

Чтобы использовать AngularJS, нам нужно включить его библиотеку в наш HTML-файл. Добавьте следующую строку в раздел <head> вашего HTML:

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

Эта строка как бы приглашает AngularJS на наш Coding Party. Она предоставляет нам доступ ко всем классным возможностям, которыми мы будем пользоваться.

Шаг 2: Создайте HTML-структуру

Теперь давайте создадим базовую структуру нашей панели поиска. Вот как это выглядит:

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

Разберем это:

ng-app="searchApp": Это говорит AngularJS, что этот div是我们的应用程序。
ng-controller="searchCtrl": Это connects наш 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 = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
});

Вот что происходит:

Мы создаем AngularJS модуль под названием searchApp.
Мы определяем контроллер с именем searchCtrl.
Внутри контроллера мы создаем массив элементов, которые мы хотим искать.

Как все это работает вместе

Когда вы вводите текст в搜索框, AngularJS автоматически обновляет переменную searchText. Директива ng-repeat затем использует этот searchText для фильтрации массива items. Это как магия, но это на самом деле просто AngularJS делает свою работу за кулисами!

Улучшение нашей панели поиска

Теперь, когда у нас есть базовый поиск, который работает, давайте добавим немного колоколов и свистков!

Поиск без учета регистра

Чтобы сделать наш поиск без учета регистра (чтобы "apple" соответствовал "Apple"), мы можем изменить наш фильтр:

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

Пользовательская функция фильтра

Для более сложного фильтра мы можем создать пользовательскую функцию фильтра:

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

Затем в нашем 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="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>

Заключение

Поздравляю! Вы только что создали функциональную панель поиска с использованием AngularJS. От настройки проекта до реализации пользовательских фильтров и добавления стилей, вы прошли долгий путь. Помните, что практика делает мастера, поэтому не бойтесь экспериментировать с различными наборами данных или добавлять новые функции к вашей панели поиска.

Вот таблица, резюмирующая основные директивы и концепции AngularJS, которые мы использовали:

Директива/Концепция	Назначение
ng-app	Определяет AngularJS приложение
ng-controller	Указывает контроллер для приложения
ng-model	Связывает ввод с переменной
ng-repeat	Итерирует по коллекции
filter	Фильтрует массив по критериям
пользовательская функция фильтра	Позволяет реализовать более сложную логику фильтрации

Продолжайте программировать, stay curious, и счастливого поиска!

Credits: Image by storyset

Предыдущий учебник:

AngularJS - Форма заказа

Следующий учебник:

AngularJS - Перетаскиваемое приложение