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>

Thank you for creating with Falcon |
2024 © Themewagon

v3.20.0

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