Problem beim Setzen der Bootstrap-Schaltflächen auf den aktiven Status ⇐ HTML

[Guest]

Ich versuche auf meiner Website Folgendes zu erreichen: Wenn auf eine Schaltfläche geklickt wird, wird sie aktiv, ihr Wert wird an ein Eingabefeld gesendet, und wenn der Wert im Eingabefeld manuell geändert wird, wird der aktive Status der Schaltfläche angezeigt sollte entfernt werden.
Hier ist ein Beispiel für die Schaltflächen:

Code: Select all

ABC


DEF


GHI

Ich habe zwei Funktionsvarianten, aber keine funktioniert vollständig und ich kann sie nicht kombinieren.
Bei der ersten Variante liegt das Problem dass der aktive Zustand der Schaltflächen nicht entfernt wird, wenn das Eingabefeld manuell bearbeitet wird.

Code: Select all

function filterTable(button) {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const data = button.getAttribute('data');
const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');

searchInput.value = data;

searchInput.dispatchEvent(new Event('input'));
}

Bei der zweiten Variante besteht das Problem darin, dass Schaltflächen nicht wiederholt umgeschaltet werden können. Es funktioniert nur einmal. Nach dem zweiten Klick (auf eine andere Schaltfläche) wird diese zweite Schaltfläche nicht aktiv.

Code: Select all

function filterTable(button) {
const buttons = document.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('active'));

button.classList.add('active');

const data = button.getAttribute('data');

const searchInput = document.querySelector('.form-control.form-control-sm[type="search"]');
searchInput.value = data;

searchInput.dispatchEvent(new Event('input'));

searchInput.addEventListener('input', () => {
buttons.forEach(btn => btn.classList.remove('active'));
}, { once: true });
}