Autocomplete UI Showdown

TODO

• Setup with pico.css
• Implement getAutoCompleteResults: Promise<string[]>
• UI with input and place to display suggestions
• Keep track of filter value
• When filter changes, get suggestions
• Show loading indicator
• Show suggestions on page
• If error, show error on page
• Clear suggestions and error when filter is cleared
• Debounce the input filter value
• Abort / cancel requests when filter changes

UI Frameworks

• React
• Svelte
• Vue
• SolidJS
• Angular
• Preact + Signals
• Vanilla JS/TS
• jQuery
• Qwik... could not figure out client side only build
• Maybe if we have time:
  • React + Preact Signals...
    • Refactor a React app??

Stretch

Credits

• Thanks to Tru for her YouTube video that inspired this