fix autocomplete controller

Author: jeffhwang-sq

service/src/main/resources/web/static/js/autocomplete_controller.js

@@ -3,95 +3,37 @@
 import { Application, Controller } from "/static/cache/stimulus/3.1.0/stimulus.min.js" // provided by Misk
 window.Stimulus = Application.start()
 
-/*
- * Usage
- * =====
- *
- * <div data-controller="autocomplete" data-autocomplete-url-value="/birds/search" role="combobox">
- *   <input type="text" data-autocomplete-target="input"/>
- *   <input type="hidden" name="bird_id" data-autocomplete-target="hidden"/>
- *   <ul class="list-group" data-autocomplete-target="results"></ul>
- * </div>
- *
- * The server is expected to send back snippets as such:
- *
- * <li class="list-group-item" role="option" data-autocomplete-value="1">Blackbird</li>
- * <li class="list-group-item" role="option" data-autocomplete-value="2">Bluebird</li>
- * <li class="list-group-item" role="option" data-autocomplete-value="3">Mockingbird</li>
- *
- */
 class AutocompleteController extends Controller {
   static targets = ["input", "results"]
-  static values = { 
-    url: String, 
-    minLength: { type: Number, default: 2 },
-    delay: { type: Number, default: 300 }
-  }
+  static values = { url: String }
 
   connect() {
-    this.inputTarget.addEventListener('input', this.debounce(this.onInput.bind(this), this.delayValue));
-    this.inputTarget.addEventListener('blur', this.onBlur.bind(this));
+    this.inputTarget.addEventListener('input', this.onInput.bind(this));
+    this.inputTarget.addEventListener('blur', () => setTimeout(() => this.hideResults(), 100));
     this.resultsTarget.addEventListener('click', this.onClick.bind(this));
-    this.resultsTarget.addEventListener('mousedown', this.onMousedown.bind(this));
-    
-    // Set autocomplete attributes
     this.inputTarget.setAttribute('autocomplete', 'off');
-    this.inputTarget.setAttribute('spellcheck', 'false');
-    
-    this.mouseDown = false;
   }
 
   onInput(event) {
     const query = event.target.value.trim();
-    
-    if (query.length >= this.minLengthValue) {
-      this.fetchResults(query);
-    } else {
-      this.hideResults();
-    }
-  }
-
-  onBlur() {
-    if (!this.mouseDown) {
-      this.hideResults();
-    }
-  }
-
-  onMousedown() {
-    this.mouseDown = true;
-    setTimeout(() => { this.mouseDown = false; }, 100);
+    query.length >= 2 ? this.fetchResults(query) : this.hideResults();
   }
 
   onClick(event) {
     const option = event.target.closest('[role="option"]');
     if (option) {
-      this.selectOption(option);
+      this.inputTarget.value = option.textContent.trim();
+      this.hideResults();
     }
   }
 
-  selectOption(option) {
-    const value = option.getAttribute('data-autocomplete-value') || option.textContent.trim();
-    this.inputTarget.value = value;
-    this.hideResults();
-    this.inputTarget.focus();
-  }
-
   async fetchResults(query) {
     try {
-      const url = `${this.urlValue}?q=${encodeURIComponent(query)}`;
-      const response = await fetch(url, {
-        headers: { 'X-Requested-With': 'XMLHttpRequest' }
-      });
+      const response = await fetch(`${this.urlValue}?q=${encodeURIComponent(query)}`);
       const html = await response.text();
-      
       this.resultsTarget.innerHTML = html;
-      
-      if (this.resultsTarget.children.length > 0) {
-        this.showResults();
-      } else {
-        this.hideResults();
-      }
-    } catch (error) {
+      html.trim() ? this.showResults() : this.hideResults();
+    } catch {
       this.hideResults();
     }
   }
@@ -103,19 +45,6 @@ class AutocompleteController extends Controller {
   hideResults() {
     this.resultsTarget.style.display = 'none';
   }
-
-  debounce(func, wait) {
-    let timeout;
-    return function executedFunction(...args) {
-      const later = () => {
-        clearTimeout(timeout);
-        func(...args);
-      };
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    };
-  }
 }
 
 Stimulus.register("autocomplete", AutocompleteController)
-