akkounts/app/javascript/controllers/field_suggestion_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "input", "badge", "suggestion" ]
  static values  = { addedValue: String }

  apply (event) {
    event.preventDefault()
    const value = event.params.value ?? this.addedValueValue

    if (this.hasInputTarget && value !== undefined) {
      this.inputTarget.value = value
      this.checkAdded()
    }
  }

  checkAdded () {
    if (!this.hasInputTarget) return

    const addedValue = this.hasAddedValueValue ? this.addedValueValue : null
    if (!addedValue) return

    const isMatch = (this.inputTarget.value.trim() === addedValue.trim())

    const emeraldClasses = [
      "border-emerald-500", "ring-1", "ring-emerald-500",
      "focus:border-emerald-500", "focus:ring-emerald-500",
      "bg-emerald-50/20"
    ]
    const amberClasses = [
      "border-amber-400", "ring-1", "ring-amber-400",
      "focus:border-amber-400", "focus:ring-amber-400"
    ]

    if (isMatch) {
      this.inputTarget.classList.remove(...amberClasses)
      this.inputTarget.classList.add(...emeraldClasses)

      if (this.hasBadgeTarget) {
        this.badgeTarget.innerHTML = `
          <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-800">
            added
          </span>
        `.trim()
        this.badgeTarget.classList.remove("hidden")
      }

      if (this.hasSuggestionTarget) {
        this.suggestionTarget.classList.add("hidden")
      }
    } else {
      this.inputTarget.classList.remove(...emeraldClasses)

      if (this.hasBadgeTarget) {
        this.badgeTarget.classList.add("hidden")
      }

      if (this.hasSuggestionTarget) {
        this.suggestionTarget.classList.remove("hidden")
      }
    }
  }
}