Bootstrap Search With Recent Searches — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsrecent-card">
    <div class="card-body p-3 position-relative">
      <input type="search" class="form-control" id="bsrecentInput" placeholder="Search documentation..." autocomplete="off">

      <div class="bsrecent-dropdown d-none" id="bsrecentDropdown">
        <div class="d-flex justify-content-between align-items-center px-2 py-1">
          <span class="small fw-semibold text-muted">Recent searches</span>
          <button type="button" class="btn btn-link btn-sm p-0" id="bsrecentClear">Clear</button>
        </div>
        <ul class="list-unstyled mb-0" id="bsrecentList"></ul>
      </div>

      <p class="small text-muted mt-2 mb-0" id="bsrecentStatus">&nbsp;</p>
    </div>
  </div>
</div>

.bsrecent-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsrecent-dropdown {
  position: absolute; left: 12px; right: 12px; top: 58px; z-index: 5;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(20,22,28,.08); padding: 4px 0;
}
.bsrecent-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  font-size: 13.5px; cursor: pointer;
}
.bsrecent-item:hover { background: #f8f9fb; }

const KEY = 'bsrecent-searches-demo';
const input = document.getElementById('bsrecentInput');
const dropdown = document.getElementById('bsrecentDropdown');
const list = document.getElementById('bsrecentList');
const status = document.getElementById('bsrecentStatus');

function readRecent() {
  try { return JSON.parse(localStorage.getItem(KEY)) || []; } catch (e) { return []; }
}

function writeRecent(arr) {
  try { localStorage.setItem(KEY, JSON.stringify(arr)); } catch (e) { /* storage unavailable — recent list just won't persist */ }
}

function renderDropdown() {
  const recent = readRecent();
  if (recent.length === 0) {
    dropdown.classList.add('d-none');
    return;
  }
  list.innerHTML = recent.map(q =>
    '<li class="bsrecent-item" data-query="' + q.replace(/"/g, '&quot;') + '">&#128337; ' + q + '</li>'
  ).join('');
  dropdown.classList.remove('d-none');
}

function addRecent(query) {
  const trimmed = query.trim();
  if (!trimmed) return;
  let recent = readRecent().filter(q => q.toLowerCase() !== trimmed.toLowerCase());
  recent.unshift(trimmed);
  recent = recent.slice(0, 5);
  writeRecent(recent);
}

function runSearch(query) {
  addRecent(query);
  status.textContent = 'Searching for "' + query + '"...';
  input.blur();
}

input.addEventListener('focus', () => {
  if (input.value.trim() === '') renderDropdown();
});

input.addEventListener('input', () => {
  if (input.value.trim() === '') renderDropdown(); else dropdown.classList.add('d-none');
});

input.addEventListener('keydown', e => {
  if (e.key === 'Enter' && input.value.trim()) runSearch(input.value);
});

list.addEventListener('click', e => {
  const item = e.target.closest('.bsrecent-item');
  if (!item) return;
  input.value = item.dataset.query;
  runSearch(item.dataset.query);
});

document.getElementById('bsrecentClear').addEventListener('click', e => {
  e.stopPropagation();
  writeRecent([]);
  dropdown.classList.add('d-none');
});

document.addEventListener('click', e => {
  if (!e.target.closest('.bsrecent-card')) dropdown.classList.add('d-none');
});