How to use Autocomplete.js as a function?

[beriknl]

On my page I have multiple input field where I would like to use the Auto completion functionality. Unfortunately my knowledge of Javascript is limited.

I have the following:

`let QueryResults = {
    resultsList: {
      element: (list, data) => {
        if (!data.results.length){
          // Create "No Results" message element
          const message = document.createElement("div");
          // Add class to the created element
          message.setAttribute("class", "no_result");
          // Add message text content
          message.innerHTML = '<span>Found No Results for "${data.query}"</span>';
          // Append message element to the results list
          list.prepend(message);
        }
      },
      noResults: true,
    },
    resultItem: {
      highlight: true
      },
    resultsList: {
        maxResults: 20
    },
};

\let autocompleteMaterialObject = {
        data: {
            src: async (query) => {
                try {
                    const source = await fetch('${apiEndPoint}');
                    const data = await source.json();
                    //console.log(api_url);
                    return data;
                } catch (error) {
                    return error;
                }
            },
        },
    }

let autocompleteMaterial = {
      selector: "#autoMaterial",
      placeHolder: "Search for Material",
      events: {
        input: {
          selection: (event) => {
                const selection = event.detail.selection.value;
                autoMaterial.input.value = selection;
                autoMaterial.input.blur();               
                const plant = selection[0];
                const description = selection[1];           
                document.getElementById("material-code").setAttribute('value', plant);
                document.getElementById("material-name").setAttribute('value', description);
                //Change Title of Element based on Selection if neccesary; do by ID instead of below.. 
                document.getElementById('panelsStayOpen-headingTwo').querySelector(":scope > button").innerHTML = "2. " + description;
                in_progress = 25;
            }
          }
        
      }
      
    }


const autoMaterial = new autoComplete(
                    Object.assign(
                        apiEndPoint = 'http://192.168.2.1:8000/api/{plant}/decomposed',
                        autocompleteMaterialObject,
                        QueryResults,
                        autocompleteMaterial
                    )
);
`

This is not working as needed obviously. But basically what I would like to achieve is "format" it as a function, taking in variables, and allowing to trigger different functions onChange events.

Ideally, I would like to format it something like:
function createAutocomplete(#div_id, #target_div_first_part_of_result, #target_div_second_part_of_result, api_url_for_ajax_call){ }

Not sure how to go about it though. Basically I have a chained form, and I want to make the next "autocomplete" depending on the previous. My rationale was I could trigger the next function after an onChange event.

Or am I being unnecessary stupid?