Allow customisation / unrestrict suggestions width

[antony]

Great autocomplete! It works well. One thing which is problematic for me though is the style attributes given to the autocomplete div when it opens, namely, the restriction of the dropdown's width to the offsetwidth of the input.

For addresses and similar, this results in very long, crushed up text in the autocomplete results.

It would be great if there were a way to override this restriction.

[kraaden]

Hi Antony,

You can manually specify width like this:

autocomplete({
    ...
    customize: function(input, inputRect, container) {
        container.style.width = "100px";
    }
});

and you can also modify the default behaviour and use it everywhere in your web app, so you don't need to override it every time you use autocomplete:

export default function autocompleteCustomized<T extends AutocompleteItem>(settings: AutocompleteSettings<T>): AutocompleteResult {
    return autocomplete({
        ...settings,
        customize: (input: HTMLInputElement, inputRect: ClientRect | DOMRect, container: HTMLDivElement) => {
            container.style.width = "100px";
        }
    });
}

[antony]

Thanks for this - perfect solution :)