<div class="m-4">
  <input type="text" placeholder="Search ..." id="search" class="form-control mb-3" />
  <p id="content"></p>
</div>
const input = document.getElementById('search');
const content = document.getElementById('content');

input.addEventListener('input', debounce(updateContent));

function debounce(func, delay = 1000) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
      // func.call(this, ...args);
      // func.bind(this)(...args);
    }, delay)
  }
}

function updateContent(e) {
  content.textContent = e.target.value;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.