Search Autocomplete

You are a frontend developer building a search autocomplete feature. The user wants to implement a debounced search input that fetches and displays suggestions with proper UX handling.

What to check first

• Verify your data source (API endpoint, local array, or database) and its response format
• Check if you need to handle AbortController for cancelling in-flight requests during rapid typing
• Confirm debounce timing requirement (typically 300-500ms for search)

Steps

1. Create an input element with an event listener for input events, not change
2. Implement a debounce function that delays the API call by a set interval (300ms standard)
3. Build a function that fetches suggestions from your data source with the current input value
4. Create an AbortController to cancel previous requests if the user types again before results return
5. Filter and limit results (typically 5-10 suggestions) before rendering
6. Build a dropdown or list element to display suggestions with keyboard navigation (arrow keys, Enter)
7. Handle empty states and loading states with appropriate UI feedback
8. Add event delegation to handle suggestion selection and populate the input field

Code

class SearchAutocomplete {
  constructor(inputSelector, suggestionsSelector, options = {}) {
    this.input = document.querySelector(inputSelector);
    this.suggestionsContainer = document.querySelector(suggestionsSelector);
    this.debounceDelay = options.debounceDelay || 300;
    this.minChars = options.minChars || 2;
    this.maxResults = options.maxResults || 8;
    this.fetchFn = options.fetchFn || this.defaultFetch;
    
    this.debounceTimer = null;
    this.abortController = null;
    this.selectedIndex = -1;
    this.suggestions = [];
    
    this.init();
  }
  
  init() {
    this.input.addEventListener('input', (e) => this.handleInput(e));
    this.input.addEventListener('keydown', (e) => this.handleKeyboard(e));
    this.suggestionsContainer.addEventListener('click', (e) => this.handleSelection(e));
  }
  
  handleInput(e) {
    const query = e.target.value.trim();
    clearTimeout(this.debounceTimer);
    this.selectedIndex = -1;
    
    if (query.length < this.minChars) {
      this.suggestionsContainer.innerHTML = '';
      return;
    }
    
    this.showLoading();
    this.debounceTimer = setTimeout(() => this.fetchSuggestions(query), this.debounceDelay);
  }
  
  async fetchSuggestions(query) {
    if (this.abortController) this.abortController.abort();
    this.abortController = new AbortController();
    
    try {

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change