Replace value on click

[bacloud22]

Hi, I cannot set the value, when the user clicks on suggestions, value of input is empty, and even the visible input does not reflect the selected (onclick) on suggestion.

Thanks a lot

[TarekRaafat]

Hello @bacloud23,

Can you please share more details on what you're trying to achieve and, if possible, your config file?

[DevDuki]

I experience the same issue. I copied the basic steps in the docs under usage and for some reason the item is not represented in the input value when clicking on it.

https://github.com/user-attachments/assets/6e96ba86-5b1a-4542-b9a8-6ac77acbfafe

[TarekRaafat]

Hello @DevDuki,

Can you please share your configurations?

[bacloud22]

@TarekRaafat Hi thank you for your response; this is my configuration:

const autoCompleteJS = new autoComplete({
    selector: '#autoComplete',
    placeHolder: 'Recherche rapide...',
    data: {
        src: async (query) => {
            try {
                // Fetch Data from external Source
                const options = isDevEnv
                    ? { referrerPolicy: 'unsafe-url', credentials: 'include' }
                    : { credentials: 'include' }
                const source = await fetch(`localhost/autocomplete/${query}`, options)
                // Data is array of `Objects` | `Strings`
                return await source.json()
            } catch (error) {
                return error
            }
        },
    },
    cache: true,
    debounce: 300,
    searchEngine: 'loose',
    diacritics: true,
    maxResults: 15,
    threshold: 3,
    resultItem: {
        highlight: true,
    },
    events: {
        input: {
            selection: (event) => {
                const selection = event.detail.selection.value
                const keyword = selection._id
                autoCompleteJS.input.value = keyword
                window.location.href = `localhost/keyword/${keyword}`
            },
        },
    },
})

[mgcodeur]

@bacloud23

Your data.src is an array of object, keys is required

selector: '#autoComplete',
placeHolder: 'Recherche rapide...',
data: {
    keys: ['_id'], // <-- just add this
    src: ......
}

Documentation Link