Debounced Type-Ahead Search

This advanced example combines multiple ember-concurrency concepts to build a basic type-ahead search field with the following features:

  • Debouncing: the browser won't make network requests until the user has stopped typing for more than 250ms. This is accomplished by combining the restartable task modifier with a yield timeout(250) at the beginning of the task.
  • Fetch cancelation: if the user starts typing while a prior fetch request is underway, that fetch request will be canceled to save network resources (this is accomplished via the try / finally cancelation pattern).
  • Use Derived State to display both a loading spinner and the final search results without using a single .set().
Live Example

Please mind the GitHub API quota :)

JavaScript
Template