Patella Example - Debounced Search

by luafox

HTML

<script src="https://cdn.jsdelivr.net/npm/patella@2.0.0-PRERELEASE"></script>
<h1>Debounced Search</h1>
<input
  type="text"
  oninput="model.input = value"
  placeholder="Enter your debounced search"
 />
<h3 id="search"></h3>

JavaScript

const $search = document.getElementById("search");

const model = Patella.observe({
  input: "",
  search: ""
});

Patella.computed(() => {
  search.innerText = model.search;
});

let timeoutID;
Patella.computed(() => {
  const input = model.input;
  if (timeoutID) clearTimeout(timeoutID);
  timeoutID = setTimeout(() => {
    model.search = input;
  }, 1000);
});