جستجو کردن

فالکون از جستجوی فازی برای قابلیت جستجو استفاده می کند. جستجوی کشویی تکمیل خودکار با ویژگی جستجوی فازی.

مستندات جستجوی فازی
پیاده سازی
  • منطقه جستجوی خود را با .search-box کلاس بپیچید
  • .search-input برای فعال کردن کشویی روی فوکوس، به فیلد ورودی اضافه کنید.
  • برای فعال کردن رفتار کشویی عنصر را data-bs-toggle="search" اضافه کنید .form
  • افزودن data-dismiss="search" به بستن منوی کشویی روی دکمه کلیک کنید
  • برای فعال کردن Fuzzy Search در کادر جستجو، .fuzzy-search کلاس را در قسمت ورودی اضافه کنید و دستورالعمل جداول پیشرفته را دنبال کنید.
<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>
نمونه جستجو
<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">
    <div class="btn-close-falcon" aria-label="Close"></div>
  </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-card fs--2 pt-0 pb-2">Recently Browsed</h6><a class="dropdown-item fs--1 px-card 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--2"></span>
          <div class="fw-normal title">Pages <span class="fas fa-chevron-left mx-1 text-500 fs--2" data-fa-transform="shrink-2"></span> Events</div>
        </div>
      </a>
      <a class="dropdown-item fs--1 px-card 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--2"></span>
          <div class="fw-normal title">E-commerce <span class="fas fa-chevron-left mx-1 text-500 fs--2" data-fa-transform="shrink-2"></span> Customers</div>
        </div>
      </a>
      <hr class="bg-200 dark__bg-900" />
      <h6 class="dropdown-header fw-medium text-uppercase px-card fs--2 pt-0 pb-2">Suggested Filter</h6><a class="dropdown-item px-card py-1 fs-0" href="../../app/e-commerce/customers.html">
        <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-soft-warning">customers:</span>
          <div class="flex-1 fs--1 title">All customers list</div>
        </div>
      </a>
      <a class="dropdown-item px-card py-1 fs-0" href="../../app/events/event-detail.html">
        <div class="d-flex align-items-center"><span class="badge fw-medium text-decoration-none me-2 badge-soft-success">events:</span>
          <div class="flex-1 fs--1 title">Latest events in current month</div>
        </div>
      </a>
      <a class="dropdown-item px-card py-1 fs-0" 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-soft-info">products:</span>
          <div class="flex-1 fs--1 title">Most popular products</div>
        </div>
      </a>
      <hr class="bg-200 dark__bg-900" />
      <h6 class="dropdown-header fw-medium text-uppercase px-card fs--2 pt-0 pb-2">Files</h6><a class="dropdown-item px-card py-2" href="#!">
        <div class="d-flex align-items-center">
          <div class="file-thumbnail me-2"><img class="border h-100 w-100 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--2 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-card 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--2 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="bg-200 dark__bg-900" />
      <h6 class="dropdown-header fw-medium text-uppercase px-card fs--2 pt-0 pb-2">Members</h6><a class="dropdown-item px-card 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--2 mb-0 d-flex">Technext Limited</p>
          </div>
        </div>
      </a>
      <a class="dropdown-item px-card 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--2 mb-0 d-flex">Brain Trust</p>
          </div>
        </div>
      </a>
      <a class="dropdown-item px-card 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--2 mb-0 d-flex">Google</p>
          </div>
        </div>
      </a>
    </div>
    <div class="text-center mt-n3">
      <p class="fallback fw-bold fs-1 d-none">No Result Found.</p>
    </div>
  </div>
</div>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی