I have a search form that can contain anywhere from 3 to almost 30 components, and which should execute an asynchronous server side search operation when one of the components has the value updated. These components can be text fields, single value selects, inputs with an autocomplete, datetimepickers or multivalue selects.

I'm trying to figure out a way to generically attach eventListeners to each of the right events for each of these components, but I'm struggling. I've found from an earlier question that not all of these components trigger the "change" event of the form, and that some of these components trigger a specific valueChanged or other event. But if I read the documentation correctly, this valueChanged event has a different signature for each component type, and on top of that each component type has a different way to get a specific instance of that component.

This makes development more complicated because while I can define a list of components as a dataset property of my form and iterate over them to add the eventListener to the right event, I'd have to add an additional property to my list of components to determine whether I need to do a getInstance, and what module I need to call that getInstance for.

So I'm wondering: is there a component-agnostic way to execute this javascript, either by doing a getInstance on a different module that works regardless of component type I'm trying to get the Instance of, or by listening to a different event that always triggers regardless of what component has the value updated?

var searchForms = document.querySelectorAll(".js-kobee-search-form");
searchForms.forEach(initSearch);

function initSearch(/** DomNode */ searchForm) {
    var formComponents = JSON.parse(searchForm.dataset.kobeeFormComponents);
    formComponents.forEach((component) => {
        searchForm.querySelector(component.selector).addEventListener(component.eventHandler, execSearch);
    });
    searchForm.addEventListener('reset', resetSearch);
    searchForm.addEventListener('submit', formSubmit);
    search(searchForm);
}