tuttogare/public_html/backend/npa/inc/components/suggestions.php

<div id="suggestionsHolder" class="card mb-3 d-none">
    <div class="card-header">
        <i class="fa fa-lightbulb"></i>
        Suggerimenti facoltativi
    </div>
    <div class="card-body">
        <a class="btn btn-primary d-block mb-3" id="suggestionsHolderAcceptAll">
            <i class="fa fa-check"></i>
            Accetta tutti
        </a>
        <div id="suggestionsHolderList"></div>
    </div>
</div>

<script>
    window.addOptionalSuggestionsButtons = () => {
        document.querySelectorAll("[suggested_val]").forEach((el) => {
            //const suggestionsHolderList = document.getElementById("suggestionsHolderList");
            let suggestionVal = el.getAttribute("suggested_val");
            let suggestionText = suggestionVal;
            let isSelect = false;

            const tagName = el.tagName.toLowerCase();

            if(tagName == "select") {
            isSelect = true;
            let option = el.querySelector(`option[value='${suggestionVal}']`);
            if(option) {
                suggestionText = option.innerText;
            }
            }
            
            // Under input button
            let suggestionButton = document.createElement("a");
            suggestionButton.classList.add("btn", "btn-info", "btn-sm", "btn-block", "mt-1");
            suggestionButton.innerHTML = `
            <i class='fa fa-lightbulb mr-2'></i>
            <span>Valore suggerito: "<strong>${suggestionText}</strong>"</span>
            `;

            //let reference = el.dataset.ref
            //    .replace("anacForm.", "")
            //    .split(".");
            //
            //for(const [key, value] of Object.entries(reference)) {
            //    if(!isNaN(value)) {
            //        reference[key] = `n° ${parseInt(value, 10)+1}`;
            //    } else {
            //        reference[key] = value.replace(/([A-Z][a-z])/g, " $1").ucfirst() + "";
            //    }
            //}
            //reference = reference.join(' > ');
            //let listElement = document.createElement("a");
            //listElement.classList.add("btn", "btn-info", "d-block", "text-left", "mb-1");
            //listElement.innerHTML = `
            //    <strong>${reference}</strong><br>
            //    <code class=" px-2">${suggestionText}</code>
            //`;

            function insertSuggestion(e) {
                el.value = suggestionVal;
                if(isSelect) {
                    $(el).trigger("chosen:updated");
                }
                checkSuggestion(null);
                return false;
            }
            function checkSuggestion(e) {
                suggestionButton.classList.remove("d-none");
                if(!isNaN(suggestionVal)) {
                    if(Math.abs(Number(el.value) - Number(suggestionVal)) < 0.001) {
                        suggestionButton.classList.add("d-none");
                    } 
                } else {
                    if(el.value == suggestionVal) {
                        suggestionButton.classList.add("d-none");
                    } 
                }
  
            }

            suggestionButton.addEventListener("click", insertSuggestion);
            //listElement.addEventListener("click", insertSuggestion);
            
            //suggestionsHolderList.appendChild(listElement);
            el.removeAttribute("suggested_val");
            el.after(suggestionButton);

            el.addEventListener("change", checkSuggestion);
            // :C
            setTimeout(() => {
                if(el.nextSibling && el.nextSibling.classList.contains("chosen-container"))
                    $(el).on("change", checkSuggestion);
            }, 1000);
            
            checkSuggestion(null);
        })
        };
</script>