Implement Autocomplete for dynamically created DOM elements.

Hi, I am using grapejs for my form builder and it is based on pure javascript and html5. I am trying to implement autocomplete for a particular field. The HTML template in which I have to implement autocomplete is created dynamically.

Example:

    let inputElement = document.createElement('input')
    inputElement.setAttribute('id', 'autocomplete')

     const autoCompleteJS = new autoComplete({
        selector: "autocomplete",
        placeHolder: "Search for Food...",
        data: {
            src: ["Sauce - Thousand Island", "Wild Boar - Tenderloin", "Goat - Whole Cut"],
            cache: true,
        },
        resultItem: {
            highlight: true
        },
        events: {
            input: {
                selection: (event) => {
                    const selection = event.detail.selection.value;
                    autoCompleteJS.input.value = selection;
                }
            }
        }
    });

Initially. it is working as autocomplete dropdown but if i click outside of the selected element(refer to the video attached) and comeback to this already selected section, the autocomplete is not working as the dynamic element will be created again with same id "autocomplete". So I have to again initialize the autocomplete by const autoCompleteJS = new autoComplete(configuration). Is there any way where we can initialize only once and if i change the configuration of autocomplete selector it should work.

https://user-images.githubusercontent.com/31312202/218695563-ef26574b-36d8-4cdd-8eff-4fe6f3ab4048.mp4

TarekRaafat / autoComplete.js

Implement Autocomplete for dynamically created DOM elements. #399