Machine Coding: High-Performance Search Autocomplete

Problem Statement

Implement a Search Autocomplete component (like Google Search) using vanilla JavaScript. The component should fetch suggestions from a mock API as the user types, but you must prevent unnecessary API calls and handle UI efficiency.

Requirements:

• Debouncing: Implement a debounce mechanism to ensure the "API call" only triggers after the user has stopped typing for 300ms.
• Caching: Store previous search results in memory so that if a user deletes text and types the same query again, the result is served instantly without an API call.
• List Rendering: Display a list of results below the input. Clicking a result should fill the input field.
• Keyboard Navigation: (Bonus) Allow users to navigate through results using the 'Up' and 'Down' arrow keys and select with 'Enter'.

Example:

If the user types "java", the mock API returns ['javascript', 'java tutorial', 'java compiler'].

Constraints:

• Do not use any external libraries.
• The API call should be simulated using setTimeout and a Promise.
• Maximum cache size: 50 entries.

Starter Code:

class Autocomplete {
  constructor(element, options) {
    this.container = element;
    this.cache = new Map();
    this.init();
  }

  // Your implementation here
}