AngularJS - Search Tab

Hello, aspiring programmers! Today, we're going to dive into the exciting world of AngularJS and learn how to create a search tab. As your friendly neighborhood computer teacher, I'm here to guide you through this journey step by step. So, grab a cup of coffee (or your favorite beverage), and let's get started!

Introduction to AngularJS Search Tab

Before we jump into the code, let's understand what a search tab is and why it's useful. Imagine you're building a website with a large amount of data, like a library catalog or an online store. A search tab allows users to quickly find what they're looking for without scrolling through endless pages. It's like having a super-smart assistant who can instantly fetch the information you need!

Setting Up Our Project

First things first, we need to set up our project. Don't worry if you've never done this before – I'll walk you through it!

Step 1: Include AngularJS Library

To use AngularJS, we need to include its library in our HTML file. Add the following line in the <head> section of your HTML:

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

This line is like inviting AngularJS to our coding party. It gives us access to all the cool features we'll be using.

Step 2: Create the HTML Structure

Now, let's create the basic structure of our search tab. Here's what it looks like:

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

Let's break this down:

ng-app="searchApp": This tells AngularJS that this div is our application.
ng-controller="searchCtrl": This connects our HTML to a controller we'll create soon.
ng-model="searchText": This binds the input field to a variable called searchText.
ng-repeat="item in items | filter:searchText": This creates a list item for each element in our items array, filtered by searchText.

Creating the AngularJS Controller

Now that we have our HTML structure, let's create the brain of our application – the controller!

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

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

Here's what's happening:

We create an AngularJS module called searchApp.
We define a controller named searchCtrl.
Inside the controller, we create an array of items that we want to search through.

How It All Works Together

When you type in the search box, AngularJS automatically updates the searchText variable. The ng-repeat directive then uses this searchText to filter the items array. It's like magic, but it's actually just AngularJS doing its thing behind the scenes!

Enhancing Our Search Tab

Now that we have a basic search working, let's add some bells and whistles!

Case-Insensitive Search

To make our search case-insensitive (so "apple" matches "Apple"), we can modify our filter:

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

Custom Filter Function

For more complex filtering, we can create a custom filter function:

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

Then in our HTML:

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

This custom filter allows us to implement more complex search logic if needed.

Styling Our Search Tab

Let's not forget about making our search tab look good! Here's some CSS to spruce things up:

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

Don't forget to add the search-container class to your main div!

Putting It All Together

Here's our complete HTML file with all the pieces in place:

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

Conclusion

Congratulations! You've just built a functional search tab using AngularJS. From setting up the project to implementing custom filters and adding some style, you've covered a lot of ground. Remember, practice makes perfect, so don't be afraid to experiment with different data sets or add more features to your search tab.

Here's a table summarizing the main AngularJS directives and concepts we used:

Directive/Concept	Purpose
ng-app	Defines the AngularJS application
ng-controller	Specifies the controller for the application
ng-model	Binds an input to a variable
ng-repeat	Iterates over a collection
filter	Filters an array based on criteria
custom filter function	Allows for more complex filtering logic

Keep coding, stay curious, and happy searching!

Credits: Image by storyset

Previous Tutorial:

AngularJS - Order Form

Next Tutorial:

AngularJS - Drag Application