Below is my HTML and I want to call a JS function every time my input field's value changes inside "foundation-autocomplete" element
<foundation-autocomplete class="coral-Form-field" pickersrc="/mnt/overlay/granite/ui/content/coral/foundation/form/pathfield/picker.html?_charset_=utf-8&path={value}&root=%2fcontent&filter=hierarchyNotFile&selectionCount=single"> <div class="foundation-autocomplete-inputgroupwrapper"> <div class="coral-InputGroup" role="presentation"> <input is="coral-textfield" class="coral3-Textfield coral-InputGroup-input" autocomplete="off" placeholder="" id="coral-id-106" role="combobox" aria-expanded="false" aria-invalid="false" value="/swing"> <span class="coral-InputGroup-button"> <button is="coral-button" class="coral3-Button coral3-Button--secondary" size="M" variant="secondary" title="Open Selection Dialog" type="button" aria-label="Open Selection Dialog"> <coral-icon class="coral3-Icon coral3-Icon--sizeS coral3-Icon--select" icon="select" size="S" autoarialabel="on" role="img" aria-label="select"></coral-icon> <coral-button-label></coral-button-label> </button> </span> </div> </div> </foundation-autocomplete> I tried with above code but function call is not happening. Is there any other way ? ` // Select the element const foundationAutocomplete = document.querySelector('foundation-autocomplete');
// Create a MutationObserver instance const observer = new MutationObserver(function(mutationsList, observer) { // Call your JavaScript function here when a mutation occurs yourFunction(); }); // Define your JavaScript function function yourFunction() { // Your code here console.log('foundation-autocomplete value changed.'); } // Configure the MutationObserver to watch for changes to the subtree and attributes observer.observe(foundationAutocomplete, { subtree: true, attributes: true }); `
changeevent for the input element inside the container..coral-Form-field input$("div.foundation-autocomplete-inputgroupwrapper").on("input", function(){....});