debounced-input-demo

components.search-form\.hbs

<div class="Search">
  <form class="Search-form" {{on "submit" this.search}}>
    <p>
      <label>
        <b class="u-visuallyHidden">Search</b>
        <Input
        	type="search"
          class="Search-formInput"
          autocomplete="off"
          placeholder="Enter your search query"
          @value={{mut this.query}}
          {{on "input" this.startDebounce}}
          {{on "blur" this.search}}
        />
      </label>
      <button class="Search-formButton" type="submit">Search</button>
    </p>
  </form>

  <div class="Search-results">
    {{#if isTyping}}
      <p>Typing…</p>
    {{else}}
      {{#if this.showResults}}
        <p>You have searched for <strong>{{this.query}}</strong></p>
        <ul>
        	<li>Result 1</li>
          <li>Result 2</li>
          <li>Result 3</li>
        </ul>
      {{/if}}
    {{/if}}
  </div>
</div>

components.search-form\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class extends Component {
  @tracked query = '';
  @tracked isTyping = false;
  currentQuery = '';
  timeoutId = undefined;

  // only display results if query isn't empty
  get showResults() {
    return this.query !== '';
  }

  // used on submit event, and debounced input event
  @action search(e) {
    // prevent form submit
    if (e) {
      e.preventDefault();
    }

    // stop debounce
    this.stopDebounce();

    // don't search the same query twice
    if (this.currentQuery === this.query) {
      return;
    }
    
    // start search
    console.log('search', this.query);
    this.currentQuery = this.query;
  }
  
  // used on input event
  @action startDebounce(e) {
    console.log('debounce start');
    clearTimeout(this.timeoutId);
    this.isTyping = true;
    this.query = e.target.value;
    this.timeoutId = setTimeout(() => {
      console.log('debounce end');
      this.search();
    }, 500);
  }

  // used on submit event
  stopDebounce() {
    clearTimeout(this.timeoutId);
    this.isTyping = false;
  }

  // clear timeout on component destroy
  willDestroy() {
    clearTimeout(this.timeoutId);
  }
}

styles.app\.css

body {
  font-family: system-ui;
}

.Search-formInput {
  margin-right: 0.5em;
  padding: 0.5em;
}

.Search-formButton {
  background: #111;
  border: 0;
  color: #fff;
  padding: 0.5em;
}

.Search-results {
  border-top: 1px solid #ccc;
  padding-top: 1em;
}

.u-visuallyHidden {
  border-width: 0;	
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

templates.application\.hbs

<SearchForm />

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}