Uncaught (in promise) TypeError: right-hand side of 'in' should be an object, got null

[DmitiyPi]

window.onload = function() {
const autoCompleteJS = new autoComplete({ config });
};

[folknor]

You've probably made the same mistake as #298 but it's hard to tell without you showing more of your code.

[clementmas]

I got the same error message. My problem was a wrong selector selector: 'search' instead of selector: '#search'.

[Danferno]

In my case, I defined the autocomplete engine before the autocomplete element was defined. Either move the engine definition to later in your html, or wrap it in a function you call at the end.

[Erando89]

I ran into the same error:

let autoCompleteJS = new autoComplete({
                selector: "#branch",
                data: {
                    src: async (query) => {
                        try {
                            const source = await fetch(`/suggestor/${query}`);
                            const data = await source.json();
                            return data;
                        } catch (error) {
                            return error;
                        }
                    }
                },
                resultItem: {
                    highlight: true,
                },
                events: {
                    input: {
                        focus: () => {
                            if (autoCompleteJS.input.value.length) autoCompleteJS.start();
                        },
                        selection: (event) => {
                            const feedback = event.detail;
                            autoCompleteJS.input.blur();
                            const selection = feedback.selection.value;
                            autoCompleteJS.input.value = selection;
                        }
                    }
                }
            });

[striker4150]

@TarekRaafat I am having the same issue with v10.2.7 when I try to use the name config setting. I investigated it a bit, and the root cause seems to be this line here:

autoComplete.js/src/autoComplete.js

Line 56 in 220ada6

this.name = "autoComplete";

The name is set in two places in the autoComplete constructor: the this.name property, and as a name field in the this.options property.

autoComplete.js/src/autoComplete.js

Lines 53 to 56 in 220ada6

	this.options = config;
	// Default Configuration options
	this.id = autoComplete.instances = (autoComplete.instances || 0) + 1;
	this.name = "autoComplete";

The this.name property is hardcoded, and the name field in the this.options parameter is not actually used in the configuring stage:

autoComplete.js/src/services/configure.js

Lines 9 to 28 in 220ada6

	const { name, options, resultsList, resultItem } = ctx;
	// Populate Configuration options
	for (const option in options) {
	if (typeof options[option] === "object") {
	if (!ctx[option]) ctx[option] = {};
	for (const subOption in options[option]) {
	ctx[option][subOption] = options[option][subOption];
	}
	} else {
	ctx[option] = options[option];
	}
	}
	// Dynamic Config Options
	ctx.selector = ctx.selector || "#" + name;
	resultsList.destination = resultsList.destination || ctx.selector;
	resultsList.id = resultsList.id || name + "_list_" + ctx.id;
	resultItem.id = resultItem.id || name + "_result";

so it throws the TypeError as soon as it tries to create the wrapper.

I'd imagine that the solution is to set this.name = config['name'] ?? 'autoComplete', but you can make the call on that.