Use autoComplete.js in two fields on the same side

[devprojectsapps]

Hi.
Is there any chance to use the autoComplete functionality in two fields on the same side?

I was hoping that with the help of eventlisteners I can adjust the individual config parameters depending on which field I am currently in, but unfortunately that does not work.

Or do I have to instantiate a separate autoComplete variable for each field?

[folknor]

Yes, just create a new instance per field.

Just make sure to use a unique selector. I have 6 different autoComplete fields in one of my projects.

[devprojectsapps]

You mean with creating a new instance per field, i have to create a complete new const autoCompleteJS = new autoComplete({...}) instance with all the configs?
So i will have "duplicate" js code ...
I had hoped that I could use the same code for different fields on the same page, just change the selector as soon as the other field is selected via focus.
Maybe you have an example for me?

[folknor]

You mean with creating a new instance per field, i have to create a complete new const autoCompleteJS = new autoComplete({...}) instance with all the configs?

Yes.

There's no need for an example, you need one per field with duplicate code and give them different names;

const one = new autoComplete({...})
const two = new autoComplete({...})
const three = new autoComplete({...})

[devprojectsapps]

Ok Thanks.

[devprojectsapps]

Sorry one more question.
Can i declare part of the configs in that way so i can use them in several places?
Like constants or varables that never changes no matter which field i use.

[folknor]

Yes.

I believe you can reuse everything except the top level {}.

async function getdata() {...}

const keys = ["name", "email"]

const resultsList = {
    tabSelect: true,
    class: "ac_result",
    noResults: true,
    element: (elm, data) => {
        const { query, matches } = data
        if ( matches.length === 0 ) {
            const result = document.createElement("p")
            result.innerHTML = `<span class="fa fa-exclamation-triangle"></span>No results for "${sanitize(q)}".`
            elm.append(result)
        }
    }
}

const one = new autoComplete({
    data: {
        src: getdata,
        keys: keys,
    },
    selector: "#fieldone",
    resultsList: resultsList
})

const two = new autoComplete({
    data: {
        src: getdata,
        keys: ["name"],
    },
    selector: "#fieldtwo",
    resultsList: resultsList
})

I've not tested this, but I think it should work.

[ntuananh]

You can do like this

const elements = [array of HTML elements]
elements.forEach(element => {
    const autoCompleteJS = new autoComplete({
        ...,
        selector: () => element,
    })
}