Search

Bootstrap Search

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap search is a component which enables the user to find words, sentences, and numbers in a collection of documents, web pages or other sources.

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

Examples of Bootstrap search use:

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

You can use the Material Design version or the default Bootstrap style.

Basic example

Basic example of search form.

Show code Edit in sandbox

HTML

        
            

            <!-- Search form -->
            <div class="md-form mt-0">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>

Show code Edit in sandbox

HTML

        
            

            <!-- Search form -->
            <input class="form-control" type="text" placeholder="Search" aria-label="Search">

Search with colorful border

Always colorful or only in the :focus state.

Show code Edit in sandbox

HTML
CSS

        
            


            <!-- Search form -->
            <div class="md-form active-pink active-pink-2 mb-3 mt-0">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="md-form active-purple active-purple-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="md-form active-cyan active-cyan-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>

            <!-- Search form -->
            <div class="md-form active-pink-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="md-form active-purple-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="md-form active-cyan-2 mb-3">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>

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

Show code Edit in sandbox

HTML
CSS

        
            

            <!-- Search form -->
            <div class="active-pink-3 active-pink-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="active-purple-3 active-purple-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="active-cyan-3 active-cyan-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>

            <!-- Search form -->
            <div class="active-pink-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="active-purple-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>
            <!-- Search form -->
            <div class="active-cyan-4 mb-4">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </div>

        
            

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

Search with icon

Always colorful or only in the :focus state.

Show code Edit in sandbox

HTML
CSS

        
            
            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm mt-0">
              <i class="fas fa-search" aria-hidden="true"></i>
              <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
            </form>

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

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

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

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

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

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

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

        
            
            .active-pink-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-pink input.form-control[type=text] {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }
            .active-purple-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-purple input.form-control[type=text] {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
            }
            .active-cyan-2 input.form-control[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
            }
            .active-cyan input.form-control[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;
            }

Show code Edit in sandbox

HTML
CSS

        
            

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

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

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

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

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

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

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

            <!-- Search form -->
            <form class="form-inline active-cyan-4">
              <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
                aria-label="Search">
              <i class="fas 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 input group

Show code Edit in sandbox

HTML
CSS

        
            

        <div class="input-group md-form form-sm form-1 pl-0">
          <div class="input-group-prepend">
            <span class="input-group-text purple lighten-3" id="basic-text1"><i class="fas fa-search text-white"
                aria-hidden="true"></i></span>
          </div>
          <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search">
        </div>

        <div class="input-group md-form form-sm form-1 pl-0">
          <div class="input-group-prepend">
            <span class="input-group-text cyan lighten-2" id="basic-text1"><i class="fas fa-search text-white"
                aria-hidden="true"></i></span>
          </div>
          <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search">
        </div>

        <div class="input-group md-form form-sm form-1 pl-0">
          <div class="input-group-prepend">
            <span class="input-group-text pink lighten-3" id="basic-text1"><i class="fas fa-search text-white"
                aria-hidden="true"></i></span>
          </div>
          <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search">
        </div>

        <div class="input-group md-form form-sm form-2 pl-0">
          <input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search">
          <div class="input-group-append">
            <span class="input-group-text amber lighten-3" id="basic-text1"><i class="fas fa-search text-grey"
                aria-hidden="true"></i></span>
          </div>
        </div>

        <div class="input-group md-form form-sm form-2 pl-0">
          <input class="form-control my-0 py-1 lime-border" type="text" placeholder="Search" aria-label="Search">
          <div class="input-group-append">
            <span class="input-group-text lime lighten-2" id="basic-text1"><i class="fas fa-search text-grey"
                aria-hidden="true"></i></span>
          </div>
        </div>

        <div class="input-group md-form form-sm form-2 pl-0">
          <input class="form-control my-0 py-1 red-border" type="text" placeholder="Search" aria-label="Search">
          <div class="input-group-append">
            <span class="input-group-text red lighten-3" id="basic-text1"><i class="fas fa-search text-grey"
                aria-hidden="true"></i></span>
          </div>
        </div>

        
            

        .input-group.md-form.form-sm.form-1 input{
          border: 1px solid #bdbdbd;
          border-top-right-radius: 0.25rem;
          border-bottom-right-radius: 0.25rem;
        }
        .input-group.md-form.form-sm.form-2 input {
          border: 1px solid #bdbdbd;
          border-top-left-radius: 0.25rem;
          border-bottom-left-radius: 0.25rem;
        }
        .input-group.md-form.form-sm.form-2 input.red-border {
          border: 1px solid #ef9a9a;
        }
        .input-group.md-form.form-sm.form-2 input.lime-border {
          border: 1px solid #cddc39;
        }
        .input-group.md-form.form-sm.form-2 input.amber-border {
          border: 1px solid #ffca28;
        }

Search with buttons

Info notification

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

Show code Edit in sandbox

HTML

        
            

        <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 class="btn aqua-gradient btn-rounded btn-sm my-0" 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 class="btn btn-outline-warning btn-rounded btn-sm my-0" 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 class="btn btn-elegant btn-rounded btn-sm my-0" type="submit">Search</button>
        </form>
        <form class="form-inline mr-auto">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn blue-gradient btn-rounded btn-sm my-0" type="submit">Search</button>
        </form>
        <form class="form-inline mr-auto">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success btn-rounded btn-sm my-0" type="submit">Search</button>
        </form>
        <form class="form-inline mr-auto">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-unique btn-rounded btn-sm my-0" type="submit">Search</button>
        </form>

Search within navbar

Show code Edit in sandbox

HTML

        
            
        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark indigo mb-4">

          <!-- Navbar brand -->
          <a class="navbar-brand" href="#">Navbar</a>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <form class="form-inline ml-auto">
              <div class="md-form my-0">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search">
              </div>
              <button href="#!" class="btn btn-outline-white btn-md my-0 ml-sm-2" type="submit">Search</button>
            </form>

          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-light blue-grey lighten-5 mb-4">

          <!-- Navbar brand -->
          <a class="navbar-brand" href="#">Navbar</a>

          <!-- Collapse button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span
              class="navbar-toggler-icon"></span></button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>

              <!-- Dropdown -->
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>

            </ul>
            <!-- Links -->

            <!-- Search form -->
            <form class="form-inline">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </form>
          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark teal lighten-2 mb-4">

          <!-- Navbar brand -->
          <a class="navbar-brand" href="#">Navbar</a>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <!-- Search form -->
            <form class="form-inline ml-auto">
              <div class="md-form my-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
              </div>
            </form>
          </div>
          <!-- Collapsible content -->

        </nav>
        <!--/.Navbar-->

        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark pink lighten-3 mb-4">

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <!-- Search form -->
            <form class="form-inline mr-auto">
              <div class="md-form my-0">
                <input class="form-control" type="text" placeholder="Search" aria-label="Search">
                <i class="fas fa-search text-white ml-3" aria-hidden="true"></i>
              </div>
            </form>

          </div>
          <!-- Collapsible content -->

          <!-- Navbar brand -->
          <a class="navbar-brand" href="#">Navbar</a>

        </nav>
        <!--/.Navbar-->

        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark blue lighten-2 mb-4">

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <form class="form-inline mr-auto">
              <input class="form-control" type="text" placeholder="Search" aria-label="Search">
              <button class="btn btn-mdb-color btn-rounded btn-sm my-0 ml-sm-2" type="submit">Search</button>
            </form>

          </div>
          <!-- Collapsible content -->

          <!-- Navbar brand -->
          <a class="navbar-brand" href="#">Navbar</a>

        </nav>
        <!--/.Navbar-->

Search within select MDB Pro component

Example label

Show code Edit in sandbox

HTML
JavaScript

        
            

        <!--Blue select-->
        <select class="mdb-select md-form colorful-select dropdown-primary" searchable="Search here..">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
          <option value="4">Option 4</option>
          <option value="5">Option 5</option>
        </select>

        <label class="mdb-main-label">Example label</label>

        <select class="mdb-select" searchable="Search here..">
          <option value="1" disabled selected>Choose your option</option>
          <option value="2" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp" class="rounded-circle">
            example
            1</option>
          <option value="3" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp" class="rounded-circle">
            example
            2</option>
          <option value="4" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp" class="rounded-circle">
            example
            1</option>
        </select>

        
            

        // Material Select
          $('.mdb-select').materialSelect({
        });

Search within multiselect MDB Pro component

Example label

Show code Edit in sandbox

HTML
JavaScript

        
            

        <select class="mdb-select md-form colorful-select dropdown-primary" multiple searchable="Search here..">
          <option value="" disabled selected>Choose your country</option>
          <option value="1">USA</option>
          <option value="2">Germany</option>
          <option value="3">France</option>
          <option value="3">Poland</option>
          <option value="3">Japan</option>
        </select>
        <label class="mdb-main-label">Label example</label>

        <select class="mdb-select" multiple searchable="Search here..">
          <optgroup label="team 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
          </optgroup>
          <optgroup label="team 2">
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
          </optgroup>
        </select>

        
            

        // Material Select
          $('.mdb-select').materialSelect({
        });

Search table items

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@mail.com
July	Dooley	july@greatstuff.com
Anja	Ravendale	a_r@test.com

Show code Edit in sandbox

HTML
JavaScript

        
            

        <div class="container">
          <input class="form-control mb-4" id="tableSearch" type="text"
            placeholder="Type something to search list items">

          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody id="myTable">
              <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@mail.com</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@greatstuff.com</td>
              </tr>
              <tr>
                <td>Anja</td>
                <td>Ravendale</td>
                <td>a_r@test.com</td>
              </tr>
            </tbody>
          </table>
        </div>

        
            

        // Filter table

        $(document).ready(function(){
          $("#tableSearch").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() {
              $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
          });
        });

Search list items

First item
Second item
Third item
Fourth item

Show code Edit in sandbox

HTML
JavaScript

        
            

        <div class="container">
          <input class="form-control" id="listSearch" type="text" placeholder="Type something to search list items">
          <br>
          <ul class="list-group" id="myList">
            <li class="list-group-item">First item</li>
            <li class="list-group-item">Second item</li>
            <li class="list-group-item">Third item</li>
            <li class="list-group-item">Fourth item</li>
          </ul>    
        </div>

        
            

        //Filter list

        $(document).ready(function(){
          $("#listSearch").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myList li").filter(function() {
              $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
          });
        });

Search anything

I am a paragraph.

I am a div element inside div.

Another paragraph.

Show code Edit in sandbox

HTML
JavaScript

        
            

        <div class="container">
          <input class="form-control" id="anythingSearch" type="text" placeholder="Type something to search list items">
          <div id="myDIV">
            <p>I am a paragraph.</p>
            <div>I am a div element inside div.</div>
            <button class="btn btn-default">I am a button</button>
            <button class="btn btn-info">Another button</button>
            <p>Another paragraph.</p>
          </div>
        </div>

        
            

        // FIlter anything
        $(document).ready(function () {
          $("#anythingSearch").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#myDIV *").filter(function () {
              $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
          });
        });