autoComplete.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["field"];

  fetchOpportunities(query) {
    const url = `/admin/salesforce.json?query=${query}`;
    let csrf = document
      .querySelector("meta[name='csrf-token']")
      .getAttribute("content");

    fetch(url, {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "X-CSRF-Token": csrf,
      },
    })
      .then((res) => res.json())
      .then((res) => {
        if (res.data.length > 0) {
          document.getElementById("sf-search-results").style.display = "block";
          let results = res.data
            .filter((opportunity) => {
              return opportunity.name
                .toLowerCase()
                .includes(query.toLowerCase());
            })
            .map((opportunity) => {
              return `<li data-action="click->auto-complete#handleSelect" value="${opportunity.opportunity_number}" class="dropdown-item">
      ${opportunity.name}
    </li>`;
            })
            .join("");

          let searchResults = document.getElementById("sf-search-results");
          searchResults.innerHTML = results;
        } else {
          document.getElementById("sf-search-results").style.display = "none";
          document
            .getElementById("salesforce_opportunity_id")
            .setAttribute("value", "");
        }
      })
      .catch((err) => console.log(err.message));
  }

  handleSelect(e) {
    const id = e.target.attributes.value.nodeValue,
      name = e.target.innerText;
    document
      .getElementById("salesforce_opportunity_id")
      .setAttribute("value", id);
    document.getElementById("cart_project").value = name;
    document.getElementById("sf-search-results").style.display = "none";
  }

  connect() {
    document.getElementById("sf-search-results").style.display = "none";

    document.getElementById("cart_project").addEventListener("input", (e) => {
      this.fetchOpportunities(e.target.value);
    });
  }
}