Rate this docs

Angular Bootstrap search

Angular Search - Bootstrap 4 & Material Design

Angular Bootstrap search is a component which enables a process of finding words, sentences, and numbers in the collection of documents, web pages or other sources.

It can be implemented with buttons or icons and placed as an input or in navbar for even better user experience.

Examples of Angular Bootstrap search use:

  • Databases
  • Search engines
  • Built-in search box on documentation page (like the one on the left)

Basic example


          <!-- Search form -->
          <form class="form-inline waves-light" mdbWavesEffect>
            <div class="md-form mt-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
            </div>
          </form>
        

Search with colorful border

Colorful always or only in the :focus state.


          <form>
            <div class="md-form active-pink active-pink-2 mb-3">
              <input class="form-control" type="search" id="search1" aria-label="Search" mdbInputDirective>
              <label for="search1">Search</label>
            </div>
            <!-- Search form -->
            <div class="md-form active-purple active-purple-2 mb-3">
              <input class="form-control" type="search" id="search2" aria-label="Search" mdbInputDirective>
              <label for="search2">Search</label>
            </div>
            <!-- Search form -->
            <div class="md-form active-cyan active-cyan-2 mb-3">
              <input class="form-control" type="search" id="search3" aria-label="Search" mdbInputDirective>
              <label for="search3">Search</label>
            </div>

            <!-- Search form -->
            <div class="md-form active-pink-2 mb-3">
              <input class="form-control" type="search" id="search4" aria-label="Search" mdbInputDirective>
              <label for="search4">Search</label>
            </div>
            <!-- Search form -->
            <div class="md-form active-purple-2 mb-3">
              <input class="form-control" type="search" id="search5" aria-label="Search" mdbInputDirective>
              <label for="search5">Search</label>
            </div>
            <!-- Search form -->
            <div class="md-form active-cyan-2 mb-3">
              <input class="form-control" type="search" id="search6" aria-label="Search" mdbInputDirective>
              <label for="search6">Search</label>
            </div>
          </form>
        

          .active-pink-2 input[type=search]:focus:not([readonly]) {
          border-bottom: 1px solid #f48fb1;
          box-shadow: 0 1px 0 0 #f48fb1;
          }

          .active-pink input[type=search] {
          border-bottom: 1px solid #f48fb1;
          box-shadow: 0 1px 0 0 #f48fb1;
          }

          .active-purple-2 input[type=search]:focus:not([readonly]) {
          border-bottom: 1px solid #ce93d8;
          box-shadow: 0 1px 0 0 #ce93d8;
          }

          .active-purple input[type=search] {
          border-bottom: 1px solid #ce93d8;
          box-shadow: 0 1px 0 0 #ce93d8;
          }

          .active-cyan-2 input[type=search]:focus:not([readonly]) {
          border-bottom: 1px solid #4dd0e1;
          box-shadow: 0 1px 0 0 #4dd0e1;
          }

          .active-cyan input[type=search] {
          border-bottom: 1px solid #4dd0e1;
          box-shadow: 0 1px 0 0 #4dd0e1;
          }
        

Search with icon

Colorful always or only in the :focus state.


          <!-- Search form -->
          <form class="form-inline md-form form-sm">
            <i class="fa fa-search" aria-hidden="true"></i>
            <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"
              mdbInputDirective>
          </form>

          <!-- Search form -->
          <form class="form-inline md-form form-sm active-pink active-pink-2">
            <i class="fa fa-search" aria-hidden="true"></i>
            <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"
              mdbInputDirective>
          </form>

          <!-- Search form -->
          <form class="form-inline md-form form-sm active-purple active-purple-2">
            <i class="fa fa-search" aria-hidden="true"></i>
            <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"
              mdbInputDirective>
          </form>

          <!-- Search form -->
          <form class="form-inline md-form form-sm active-cyan active-cyan-2">
            <i class="fa fa-search" aria-hidden="true"></i>
            <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"
              mdbInputDirective>
          </form>

          <!-- Search form -->
          <form class="form-inline md-form form-sm">
            <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"
              mdbInputDirective>
            <i class="fa fa-search" aria-hidden="true"></i>
          </form>

          <!-- Search form -->
          <form class="form-inline md-form form-sm active-pink-2">
            <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"
              mdbInputDirective>
            <i class="fa fa-search" aria-hidden="true"></i>
          </form>

          <!-- Search form -->
          <form class="form-inline md-form form-sm active-purple-2">
            <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"
              mdbInputDirective>
            <i class="fa fa-search" aria-hidden="true"></i>
          </form>

          <!-- Search form -->
          <form class="form-inline md-form form-sm active-cyan-2">
            <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"
              mdbInputDirective>
            <i class="fa fa-search" aria-hidden="true"></i>
          </form>
        

          .active-pink-2 input[type=text]:focus:not([readonly]) {
          border-bottom: 1px solid #f48fb1;
          box-shadow: 0 1px 0 0 #f48fb1;
          }

          .active-pink input[type=text] {
          border-bottom: 1px solid #f48fb1;
          box-shadow: 0 1px 0 0 #f48fb1;
          }

          .active-purple-2 input[type=text]:focus:not([readonly]) {
          border-bottom: 1px solid #ce93d8;
          box-shadow: 0 1px 0 0 #ce93d8;
          }

          .active-purple input[type=text] {
          border-bottom: 1px solid #ce93d8;
          box-shadow: 0 1px 0 0 #ce93d8;
          }

          .active-cyan-2 input[type=text]:focus:not([readonly]) {
          border-bottom: 1px solid #4dd0e1;
          box-shadow: 0 1px 0 0 #4dd0e1;
          }

          .active-cyan input[type=text] {
          border-bottom: 1px solid #4dd0e1;
          box-shadow: 0 1px 0 0 #4dd0e1;
          }

          .active-cyan .fa,
          .active-cyan-2 .fa {
          color: #4dd0e1;
          }

          .active-purple .fa,
          .active-purple-2 .fa {
          color: #ce93d8;
          }

          .active-pink .fa,
          .active-pink-2 .fa {
          color: #f48fb1;
          }
        

Search with buttons MDB Pro component

Info notification

MDB has many buttons to use within search box. Take a look here to know all the possibilities.


        <form class="form-inline md-form mr-auto mb-4">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button mdbBtn size="sm" gradient="aqua" rounded="true" class="my-0 waves-light" mdbWavesEffect type="submit">Search</button>
        </form>
        <form class="form-inline md-form mr-auto mb-4">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button mdbBtn size="sm" color="warning" outline="true" rounded="true" class="my-0 waves-light"
            mdbWavesEffect type="submit">Search</button>
        </form>
        <form class="form-inline md-form mr-auto mb-4">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button mdbBtn size="sm" color="elegant" rounded="true" class="my-0 waves-light" mdbWavesEffect type="submit">Search</button>
        </form>
      

Searching with local data

Below you will find a basic example of how you can implement local data searches in your application. In this example, the filtering of the results is achieved by using a custom pipe.

First, define the dataset you want to use to filter the results for.


        import { Component } from '@angular/core';

        @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
        })
        export class AppComponent {
            dataset = ['MDB', 'Angular', 'Bootstrap', 'Framework', 'SPA', 'React', 'Vue'];
        }
    

Then create an html markup for searching, and displaying the results.


      <div class="md-form">
        <input type="search" [(ngModel)]="searchText" placeholder="Search text">
      </div>
      <ul *ngFor="let data of dataset | filter: searchText">
        <li>{{data}}</li>
      </ul>
    

The next step is to generate a pipe in which you can place the logic of filtering the results. To do this, use the Angular CLI command below:

ng generate pipe filter

The last step is to fill the previously created pipe with filtering logic.


        import { Pipe, PipeTransform } from '@angular/core';

        @Pipe({
          name: 'filter'
        })
        export class FilterPipe implements PipeTransform {
          transform(items: any[], searchText: string): any[] {

            if (!items) {
              return [];
            }
            if (!searchText) {
              return items;
            }
            searchText = searchText.toLocaleLowerCase();

            return items.filter(it => {
              return it.toLocaleLowerCase().includes(searchText);
            });
          }
        }
    

Searching with remote data

Below you will find a basic example of how you can implement remote data searches in your application. In this example, the filtering of the results is achieved by using a custom pipe.

First, create a variable to hold your Fake API URL, and provide code which connect your application with remote API.
Then send HTTP GET request to pull data from remote API to your application, and populate usersArray with those data.


        // Fake API URL
        url: string = 'https://jsonplaceholder.typicode.com/users';
        usersArray: Array = [];

        constructor(private http: Http) {
          this.http.get(this.url).subscribe(data => {
            // Populating usersArray with names from API
            data.json().forEach(element => {
              this.usersArray.push(element.name);
            });
          });
        }
    

Then create an html markup for searching, and displaying the results.


<div class="md-form">
  <input type="search" [(ngModel)]="searchText" placeholder="Search text">
</div>
<ul *ngFor="let user of usersArray | filter: searchText">
  <li>{{user}}</li>
</ul>
    

The next step is to generate a pipe in which you can place the logic of filtering the results. To do this, use the Angular CLI command below:


      ng generate pipe filter
      

The last step is to fill the previously created pipe with filtering logic.


        import { Pipe, PipeTransform } from '@angular/core';

        @Pipe({
          name: 'filter'
        })
        export class FilterPipe implements PipeTransform {
          transform(items: any[], searchText: string): any[] {

            if (!items) {
              return [];
            }
            if (!searchText) {
              return items;
            }
            searchText = searchText.toLocaleLowerCase();

            return items.filter(it => {
              return it.toLocaleLowerCase().includes(searchText);
            });
          }
        }
    

Angular Search - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of search component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Search:
// MDB Angular Pro
import { WavesModule, InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md'
// Forms Module - for ngModel
import { FormsModule } from '@angular/forms'