Additional spaces between characters

[BasicHtmlCoder]

Additional spaces between characters.

I'm using the latest version, with the following code:

export const setupAutoComplete = async () => {
    const autoCompleteJS = new autoComplete({
        selector: '#autoComplete',
        placeHolder: 'Quick search...',
        data: {
            src: async (query) => {
                try {
                    const source = await fetch(`${consts.APIHost[process.env.NODE_ENV]}/autocomplete/${query}`)
                    return await source.json()
                } catch (error) {
                    return error
                }
            },
            // Data 'Object' key to be searched
            keys: ['_id'],
        },
        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 = `${consts.APIHost[process.env.NODE_ENV]}/keyword/${keyword}`
                },
            },
        },
    })
}

Thanks a lot for this beautiful library.

[folknor]

Hi

I'm quite sure those "spaces" are padding or margin added by your CSS somehow.

By default if you specify highlight: true like you have, that means autoComplete.js will add mark HTML elements around each matching character, and if you have some kind of CSS rule that adds margin or padding around child elements of the autoComplete dropdown/popup, the mark elements would also be affected by this, for example.

Have you inspected the generated HTML in the browsers development tools? You can see precisely why an element has space around it there.

Thank you