Simple Autocomplete

#javascript

Here is a simple autocomplete using The French Government Design system.
You can see a demo here Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Autocomplete Components with GUIDs</title>

  <!-- Include DSFR CSS using CDN (ensure you are using the latest version) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gouvfr/dsfr/dist/dsfr/dsfr.min.css">

</head>
<body>

<h4>
  Autocomplete DSFR
  </h4>
<!-- Multiple autocomplete-input components -->
<div class="container">
  <div class="autocomple-container">
      <autocomplete-input></autocomplete-input>
      <autocomplete-input></autocomplete-input> 
  </div>
   <ul class="fr-btns-group" style="max-width:415px;width:100%;margin:0 auto;">
      <li>
          <button  class="fr-btn">Calculer le prix en vigueur</button>
      </li>
  </ul>
</div>


<script>
  class AutocompleteInput extends HTMLElement {
    constructor() {
      super();

      // Attach Shadow DOM
      this.attachShadow({ mode: 'open' });

      // Generate a unique ID for this component instance
      this.uniqueId = this.generateGUID();

      // Template for the component
      const template = document.createElement('template');
      template.innerHTML = `
        <!-- Import DSFR stylesheet into the shadow DOM -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gouvfr/dsfr/dist/dsfr/dsfr.min.css">

        <style>
          /* Custom scoped styles for the component */
          .fr-input-group {
            position: relative;
            margin-bottom:1rem !important;

            margin:0 auto;
          }

          ul {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            border: 1px solid #ccc;
            max-height: 150px;
            overflow-y: auto;
            background: white;
            list-style: none;
            padding: 0;
            margin: 0;
            z-index: 1000;
            display: none;
          }
          li {
            padding: 8px;
            cursor: pointer;
          }
          li:hover, .highlight {
            background-color: #ddd;
          }

          .container {
            width:100%;
            max-width:400px;
            margin:0 auto;
          }

        </style>

        <div class="container">
          <div class="fr-input-group">
            <!-- DSFR styled input -->
            <label for="${this.uniqueId}" class="fr-label"></label>
            <input id="${this.uniqueId}" class="fr-input" type="text" placeholder="Sélectionner"/>
            <ul></ul>
          </div>
        </div>
      `;

      // Attach the template to the shadow DOM
      this.shadowRoot.appendChild(template.content.cloneNode(true));

      // Internal component variables
      this.inputElement = this.shadowRoot.querySelector('input');
      this.listElement = this.shadowRoot.querySelector('ul');
      this.suggestions = [];
      this.filteredSuggestions = [];
      this.highlightedIndex = -1;

      // Event listeners
      this.inputElement.addEventListener('input', this.onInput.bind(this));
      this.inputElement.addEventListener('keydown', this.onKeyDown.bind(this));
      this.listElement.addEventListener('click', this.onSelect.bind(this));
    }

    // Method to generate a GUID for each instance
    generateGUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    }

    // Method to update suggestions from outside the component
    setSuggestions(suggestions) {
      this.suggestions = suggestions;
    }

    // Method called when user types in the input field
    onInput() {
      const inputValue = this.inputElement.value.toLowerCase().trim(); // Trim input value
      this.filteredSuggestions = this.suggestions.filter(suggestion =>
        suggestion.toLowerCase().includes(inputValue)
      );

      this.highlightedIndex = -1; // Reset highlighted index

      // Hide the list if input is empty or no matches
      if (inputValue === '' || this.filteredSuggestions.length === 0) {
        this.listElement.style.display = 'none';
      } else {
        this.updateList();
      }
    }

    // Method to update the suggestion list
    updateList() {
      this.listElement.innerHTML = '';
      if (this.filteredSuggestions.length > 0) {
        this.filteredSuggestions.forEach((suggestion, index) => {
          const listItem = document.createElement('li');
          listItem.textContent = suggestion;
          if (index === this.highlightedIndex) {
            listItem.classList.add('highlight');
          }
          this.listElement.appendChild(listItem);
        });
        this.listElement.style.display = 'block';
      } else {
        this.listElement.style.display = 'none'; // Ensure it's hidden when no matches
      }
    }

    // Handle keyboard navigation (arrow keys, Enter)
    onKeyDown(event) {
      const key = event.key;
      if (key === 'ArrowDown') {
        this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredSuggestions.length - 1);
        this.updateList();
      } else if (key === 'ArrowUp') {
        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
        this.updateList();
      } else if (key === 'Enter') {
        if (this.highlightedIndex > -1) {
          this.inputElement.value = this.filteredSuggestions[this.highlightedIndex];
          this.listElement.style.display = 'none';
        }
      }
    }

    // Method called when the user selects a suggestion
    onSelect(event) {
      if (event.target.tagName === 'LI') {
        this.inputElement.value = event.target.textContent;
        this.listElement.style.display = 'none';
      }
    }
  }

  // Register the custom element
  customElements.define('autocomplete-input', AutocompleteInput);

  // Example of using the component with multiple instances
  const autocompleteInputs = document.querySelectorAll('autocomplete-input');

  // Set different suggestions for each instance
  autocompleteInputs[0].setSuggestions(['Table', 'Chaise', 'Armoire', 'Date']);
  autocompleteInputs[1].setSuggestions(['Paris', 'Rome', 'Naples']);
</script>

</body>
</html>