Skip to main content

Design Autocomplete

Requirements​

Functional Requirements​

  • Provide suggestions as the user types
  • Display suggestions in a dropdown menu
  • Allow the user to select a suggestion
  • Update the input field with the selected suggestion
  • Allow the user to submit the form with the selected suggestion
  • Handle large datasets efficiently
  • Allow navigation using keyboard (arrows, Enter, Esc)
  • Clear the input field by clicking on the x button
  • Allow the user to dismiss the dropdown menu by clicking outside of it
  • Provide a loading indicator while fetching suggestions

Non Functional Requirements​

  • Low latency for suggestions
  • High availability
  • Scalable to handle large number of users
  • Responsive design for different screen sizes
  • Support for internationalization
  • Support for accessibility (screen readers, keyboard navigation)
  • Support for mobile devices

System Design​

Architecture​

The autocomplete system can be divided into the following components:

  • Frontend: The user interface that captures user input and displays suggestions.
  • Backend: The server that processes user input and returns suggestions.
  • Database: The storage system for the suggestions data.
  • Cache: An in-memory cache to store frequently accessed suggestions.
  • API Gateway: A service that routes requests to the appropriate backend service.
  • Load Balancer: Distributes incoming traffic across multiple backend servers.
  • CDN: Delivers static assets like images, CSS, and JavaScript files to users.
  • Monitoring: Tracks system performance, logs, and metrics to identify issues and optimize performance.

Frontend Components​

The frontend application should be organized into the following components:

  • Input Field: Captures user input and displays suggestions.
  • Dropdown Menu: Displays suggestions based on user input.
  • Loading Indicator: Shows a loading spinner while fetching suggestions.
  • Clear Button: Clears the input field.
  • Event Handlers: Handles user interactions like selecting a suggestion, submitting the form, and dismissing the dropdown menu.
  • Keyboard Navigation: Allows users to navigate the dropdown menu using keyboard shortcuts.
  • Accessibility Features: Supports screen readers, keyboard navigation, and other accessibility features.
  • Responsive Design: Adapts to different screen sizes and devices.

API Endpoints​

The autocomplete system should expose the following API endpoints:

GET /suggestions?q={query}

Response:
{
  suggestions: [
    { id: 1, text: "Suggestion 1" },
    { id: 2, text: "Suggestion 2" },
    ...
  ]
}

Optimizations​

Accessibility​

  • Keyboard navigation
    • Shortcuts for easy access
    • Tapable items (navigate btw elements)
    • Close the shortcut
    • Search
  • Visual optimization
    • We want to enforce rems in our app (custom settings)
  • Screen reader friendly
    • Provide aria-live field
    • Use aria attribute on item to give a correct item role

Performance​

  • Debounce to delay function call
  • Use virtual scroll to decrease memory usage
  • Use infinite scroll
  • Network
    • Debounce
    • Caching
      • Server Cache
      • Browser Cache
      • Widget cache (clear on timeout)
  • Rendering
    • DOM
    • Virtualization
      • Maintain constant number of nodes
      • Do not delete and insert the nodes, we update it
    • Perception (How user feels)
      • Skeleton, loaders and placeholders
    • CSS
      • USE CSS Animation instead of JS animations
      • Avoid Reflows
      • CSS Naming conventions: BEM, CSS Modules
  • Javascript
    • Do Stuff async
    • WEB workers for static filtering
    • Use server filtering for large data