Bootstrap Advanced Search Panel — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsadv-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center">
        <input type="text" class="form-control me-2" id="bsadvKeyword" placeholder="Search tickets...">
        <button type="button" class="btn btn-outline-secondary flex-shrink-0" type="button" data-bs-toggle="collapse" data-bs-target="#bsadvPanel">
          Filters <span id="bsadvBadge" class="badge text-bg-secondary ms-1 d-none">0</span>
        </button>
      </div>

      <div class="collapse mt-3" id="bsadvPanel">
        <div class="row g-2">
          <div class="col-6">
            <label class="form-label small fw-semibold mb-1">Status</label>
            <select class="form-select form-select-sm" id="bsadvStatus">
              <option value="">Any</option>
              <option value="open">Open</option>
              <option value="pending">Pending</option>
              <option value="closed">Closed</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold mb-1">Priority</label>
            <select class="form-select form-select-sm" id="bsadvPriority">
              <option value="">Any</option>
              <option value="high">High</option>
              <option value="medium">Medium</option>
              <option value="low">Low</option>
            </select>
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold mb-1">From date</label>
            <input type="date" class="form-control form-control-sm" id="bsadvFrom">
          </div>
          <div class="col-6">
            <label class="form-label small fw-semibold mb-1">To date</label>
            <input type="date" class="form-control form-control-sm" id="bsadvTo">
          </div>
        </div>
        <div class="d-flex gap-2 mt-3">
          <button type="button" class="btn btn-dark btn-sm fw-bold" id="bsadvApply">Apply filters</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" id="bsadvReset">Reset</button>
        </div>
      </div>

      <p class="small text-muted mt-3 mb-0" id="bsadvSummary">No filters applied.</p>
    </div>
  </div>
</div>

.bsadv-card { width: 420px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }

const keyword = document.getElementById('bsadvKeyword');
const status = document.getElementById('bsadvStatus');
const priority = document.getElementById('bsadvPriority');
const from = document.getElementById('bsadvFrom');
const to = document.getElementById('bsadvTo');
const badge = document.getElementById('bsadvBadge');
const summary = document.getElementById('bsadvSummary');

function activeCriteria() {
  const parts = [];
  if (keyword.value.trim()) parts.push('keyword "' + keyword.value.trim() + '"');
  if (status.value) parts.push('status: ' + status.value);
  if (priority.value) parts.push('priority: ' + priority.value);
  if (from.value) parts.push('from ' + from.value);
  if (to.value) parts.push('to ' + to.value);
  return parts;
}

function fieldCount() {
  return [status.value, priority.value, from.value, to.value].filter(Boolean).length;
}

function applyFilters() {
  const parts = activeCriteria();
  const n = fieldCount();
  badge.textContent = String(n);
  badge.classList.toggle('d-none', n === 0);
  summary.textContent = parts.length ? 'Searching for ' + parts.join(', ') + '.' : 'No filters applied.';
}

document.getElementById('bsadvApply').addEventListener('click', applyFilters);

document.getElementById('bsadvReset').addEventListener('click', () => {
  keyword.value = '';
  status.value = '';
  priority.value = '';
  from.value = '';
  to.value = '';
  applyFilters();
});

keyword.addEventListener('keydown', e => { if (e.key === 'Enter') applyFilters(); });

applyFilters();