Search

Falcon tailwind 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-4">
  <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="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 absolute end-0 top-1/2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 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-sans start-0 mt-2 py-0 overflow-hidden w-full">
    <div class="scrollbar list py-4 max-h-96">
      <h6 class="dropdown-header font-medium uppercase px-5 text-xs pt-0 pb-2">Recently Browsed</h6><a class="dropdown-item text-sm px-5 py-1 hover-primary" href="../../undefined">
        <div class="flex items-center">
          <span class="text-xs"><span class="fas fa-circle me-2 text-(--border-color-default) dark:text-(--border-color-emphasis)"></span></span>
          <div class="font-normal title">Pages <span class="text-xs"><span class="fas fa-chevron-right mx-1 text-muted" data-fa-transform="shrink-2"></span></span> Events</div>
        </div>
      </a>
      <a class="dropdown-item text-sm px-5 py-1 hover-primary" href="../../app/e-commerce/customers.html">
        <div class="flex items-center">
          <span class="text-xs"><span class="fas fa-circle me-2 text-(--border-color-default) dark:text-(--border-color-emphasis)"></span></span>
          <div class="font-normal title">E-commerce <span class="text-xs"><span class="fas fa-chevron-right mx-1 text-muted" data-fa-transform="shrink-2"></span></span> Customers</div>
        </div>
      </a>
      <hr class="border-subtle dark:border-emphasis" />
      <h6 class="dropdown-header font-medium uppercase px-5 text-xs pt-0 pb-2">Suggested Filter</h6><a class="dropdown-item px-5 py-1 text-base" href="../../app/e-commerce/customers.html">
        <div class="flex items-center"><span class="badge font-medium no-underline me-2 badge-subtle-warning">customers:</span>
          <div class="flex-1 text-sm text-start title">All customers list</div>
        </div>
      </a>
      <a class="dropdown-item px-5 py-1 text-base" href="../../undefined">
        <div class="flex items-center"><span class="badge font-medium no-underline me-2 badge-subtle-success">events:</span>
          <div class="flex-1 text-sm text-start title">Latest events in current month</div>
        </div>
      </a>
      <a class="dropdown-item px-5 py-1 text-base" href="../../app/e-commerce/product/product-grid.html">
        <div class="flex items-center"><span class="badge font-medium no-underline me-2 badge-subtle-info">products:</span>
          <div class="flex-1 text-sm text-start title">Most popular products</div>
        </div>
      </a>
      <hr class="border-subtle dark:border-emphasis" />
      <h6 class="dropdown-header font-medium uppercase px-5 text-xs pt-0 pb-2">Files</h6><a class="dropdown-item px-5 py-2" href="#!">
        <div class="flex items-center">
          <div class="file-thumbnail me-2"><img class="border size-full object-cover rounded-md" src="../../assets/img/products/3-thumb.png" alt="" /></div>
          <div class="flex-1">
            <h6 class="mb-0 text-start title">iPhone</h6>
            <p class="text-xs mb-0 flex"><span class="font-semibold">Antony</span><span class="font-medium text-default ms-2">27 Sep at 10:30 AM</span></p>
          </div>
        </div>
      </a>
      <a class="dropdown-item px-5 py-2" href="#!">
        <div class="flex items-center">
          <div class="file-thumbnail me-2"><img src="../../assets/img/icons/zip.png" alt="" /></div>
          <div class="flex-1">
            <h6 class="mb-0 text-start title">Falcon v1.8.2</h6>
            <p class="text-xs mb-0 flex"><span class="font-semibold">John</span><span class="font-medium text-default ms-2">30 Sep at 12:30 PM</span></p>
          </div>
        </div>
      </a>
      <hr class="border-subtle dark:border-emphasis" />
      <h6 class="dropdown-header font-medium uppercase px-5 text-xs pt-0 pb-2">Members</h6><a class="dropdown-item px-5 py-2" href="../../pages/user/profile.html">
        <div class="flex items-center">
          <div class="avatar avatar-l avatar-status-online mb-0 me-2">
            <img class="rounded-full" src="../../assets/img/team/1.jpg" alt="" />
          </div>
          <div class="flex-1">
            <h6 class="mb-0 text-start title">Anna Karinina</h6>
            <p class="text-xs mb-0 flex">Technext Limited</p>
          </div>
        </div>
      </a>
      <a class="dropdown-item px-5 py-2" href="../../pages/user/profile.html">
        <div class="flex items-center">
          <div class="avatar avatar-l mb-0 me-2">
            <img class="rounded-full" src="../../assets/img/team/2.jpg" alt="" />
          </div>
          <div class="flex-1">
            <h6 class="mb-0 text-start title">Antony Hopkins</h6>
            <p class="text-xs mb-0 flex">Brain Trust</p>
          </div>
        </div>
      </a>
      <a class="dropdown-item px-5 py-2" href="../../pages/user/profile.html">
        <div class="flex items-center">
          <div class="avatar avatar-l mb-0 me-2">
            <img class="rounded-full" src="../../assets/img/team/3.jpg" alt="" />
          </div>
          <div class="flex-1">
            <h6 class="mb-0 text-start title">Emma Watson</h6>
            <p class="text-xs mb-0 flex">Google</p>
          </div>
        </div>
      </a>
    </div>
    <div class="text-center -mt-4">
      <p class="fallback font-bold text-lg hidden">No Result Found.</p>
    </div>
  </div>
</div>

Thank you for creating with Falcon tailwind
2026 © ThemeWagon

v1.0.0-alpha

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 tailwind now and create beautiful dashboards with hundreds of widgets.

Purchase
customize