### Search

Falcon uses Fuzzy search for search functionality. An autocomplete search dropdown with Fuzzy Search feature.

Fuzzy Search Documentation

##### Implementation

- Wrap your search area with `.search-box` class
- Add `.search-input` to input field to trigger dropdown on focus.
- Add `data-bs-toggle="search"` in `form` element to enable dropdown behavior.
- Add `data-dismiss="search"` to close dropdown on button click
- To enable Fuzzy Search on search box add `.fuzzy-search` class in input field and follow the instruction of Advance Tables

    <ul class="bullet-inside ps-0 my-3">
      <li>Wrap your search area with <code>.search-box </code>class</li>
      <li>Add <code>.search-input </code>to input field to trigger dropdown on focus.</li>
      <li>Add <code>data-bs-toggle="search" </code>in <code>form </code>element to enable dropdown behavior.</li>
      <li>Add <code>data-dismiss="search" </code>to close dropdown on button click</li>
      <li>To enable Fuzzy Search on search box add <code>.fuzzy-search </code>class in input field and follow the instruction of <a href="../../modules/tables/advance-tables.html">Advance Tables</a></li>
    </ul>

##### Example of Search

    <div class="search-box" data-list='{"valueNames":["title"]}'>
      <form class="position-relative" data-bs-toggle="search" data-bs-display="static">
        <input class="form-control search-input fuzzy-search" type="search" placeholder="Search..." aria-label="Search" />
        <span class="fas fa-search search-box-icon"></span>
      </form>
      <div class="btn-close-falcon-container position-absolute end-0 top-50 translate-middle shadow-none" data-bs-dismiss="search">
        <button class="btn btn-link btn-close-falcon p-0" aria-label="Close"></button>
      </div>
      <div class="dropdown-menu border font-base start-0 mt-2 py-0 overflow-hidden w-100">
        <div class="scrollbar list py-3" style="max-height: 24rem;">
          <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Recently Browsed</h6><a class="dropdown-item fs-10 px-x1 py-1 hover-primary" href="../../app/events/event-detail.html">
            <div class="d-flex align-items-center">
              <span class="fas fa-circle me-2 text-300 fs-11"></span>
              <div class="fw-normal title">Pages <span class="fas fa-chevron-right mx-1 text-500 fs-11" data-fa-transform="shrink-2"></span> Events</div>
            </div>
          </a>
          <a class="dropdown-item fs-10 px-x1 py-1 hover-primary" href="../../app/e-commerce/customers.html">
            <div class="d-flex align-items-center">
              <span class="fas fa-circle me-2 text-300 fs-11"></span>
              <div class="fw-normal title">E-commerce <span class="fas fa-chevron-right mx-1 text-500 fs-11" data-fa-transform="shrink-2"></span> Customers</div>
            </div>
          </a>
          <hr class="text-200 dark__text-900" />
          <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Suggested Filter</h6><a class="dropdown-item px-x1 py-1 fs-9" href="../../app/e-commerce/customers.html">
            <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-warning">customers:</span>
              <div class="flex-1 fs-10 title">All customers list</div>
            </div>
          </a>
          <a class="dropdown-item px-x1 py-1 fs-9" href="../../app/events/event-detail.html">
            <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-success">events:</span>
              <div class="flex-1 fs-10 title">Latest events in current month</div>
            </div>
          </a>
          <a class="dropdown-item px-x1 py-1 fs-9" href="../../app/e-commerce/product/product-grid.html">
            <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-subtle-info">products:</span>
              <div class="flex-1 fs-10 title">Most popular products</div>
            </div>
          </a>
          <hr class="text-200 dark__text-900" />
          <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Files</h6><a class="dropdown-item px-x1 py-2" href="#!">
            <div class="d-flex align-items-center">
              <div class="file-thumbnail me-2"><img class="border h-100 w-100 object-fit-cover rounded-3" src="../../assets/img/products/3-thumb.png" alt="" /></div>
              <div class="flex-1">
                <h6 class="mb-0 title">iPhone</h6>
                <p class="fs-11 mb-0 d-flex"><span class="fw-semi-bold">Antony</span><span class="fw-medium text-600 ms-2">27 Sep at 10:30 AM</span></p>
              </div>
            </div>
          </a>
          <a class="dropdown-item px-x1 py-2" href="#!">
            <div class="d-flex align-items-center">
              <div class="file-thumbnail me-2"><img class="img-fluid" src="../../assets/img/icons/zip.png" alt="" /></div>
              <div class="flex-1">
                <h6 class="mb-0 title">Falcon v1.8.2</h6>
                <p class="fs-11 mb-0 d-flex"><span class="fw-semi-bold">John</span><span class="fw-medium text-600 ms-2">30 Sep at 12:30 PM</span></p>
              </div>
            </div>
          </a>
          <hr class="text-200 dark__text-900" />
          <h6 class="dropdown-header fw-medium text-uppercase px-x1 fs-11 pt-0 pb-2">Members</h6><a class="dropdown-item px-x1 py-2" href="../../pages/user/profile.html">
            <div class="d-flex align-items-center">
              <div class="avatar avatar-l status-online me-2">
                <img class="rounded-circle" src="../../assets/img/team/1.jpg" alt="" />
              </div>
              <div class="flex-1">
                <h6 class="mb-0 title">Anna Karinina</h6>
                <p class="fs-11 mb-0 d-flex">Technext Limited</p>
              </div>
            </div>
          </a>
          <a class="dropdown-item px-x1 py-2" href="../../pages/user/profile.html">
            <div class="d-flex align-items-center">
              <div class="avatar avatar-l me-2">
                <img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
              </div>
              <div class="flex-1">
                <h6 class="mb-0 title">Antony Hopkins</h6>
                <p class="fs-11 mb-0 d-flex">Brain Trust</p>
              </div>
            </div>
          </a>
          <a class="dropdown-item px-x1 py-2" href="../../pages/user/profile.html">
            <div class="d-flex align-items-center">
              <div class="avatar avatar-l me-2">
                <img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
              </div>
              <div class="flex-1">
                <h6 class="mb-0 title">Emma Watson</h6>
                <p class="fs-11 mb-0 d-flex">Google</p>
              </div>
            </div>
          </a>
        </div>
        <div class="text-center mt-n3">
          <p class="fallback fw-bold fs-8 d-none">No Result Found.</p>
        </div>
      </div>
    </div>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize