Perhaps add JSDocs to the main autoComplete function?

I’m not sure if this is useful for anyone else. I do not wish to have it added just for me. I think maybe the whole API should change instead, but for the time being maybe this is helpful?

Below I just added a few of the config options for testing. You can see how it works.

• =xxx is a default value.
• [] means it’s optional.

/**
 * @desc This is autoComplete.js
 * @version 10.0.0
 * @example const autoCompleteJS = new autoComplete({config});
 *
 * @param {Object} config - Configuration options
 * @param {string} [config.name=autoComplete] - Prepended to all created DOM element class names.
 * @param {(string|Function)} [config.selector=#autoComplete] - Must point to or return the relevant input field or element that autoComplete.js should act upon.
 * @param {Object} config.data - Data source.
 * @param {(Array|Function} config.data.src - An array of values to search or a async or immediate function that returns an array of values to search.
 * @param {string[]} [config.data.keys] - Only used if config.data.src is an array of objects. Specifies which keys in the objects autoComplete.js should search.
 * @param {boolean} [config.data.cache=false] - Whether or not autoComplete.js should cache results from config.data.src or not.
 * @param {Function} [config.data.filter] - A function used to filter the returns from config.data.src before showing them to the user. Function signature: (Array), is given the results from config.data.src.
 */
export default function autoComplete(config) {
...
}

If you want, I can write it all.

Do you think it would be useful to anyone, or is it a waste of time?

[folknor]

Here we go 😄 Probably lots of mistakes in it, feel free to edit 👍

/**
 * @description Creates a new instance of autoComplete.js with the given configuration.
 * @version 10.1.1
 * @see {@link https://tarekraafat.github.io/autoComplete.js/#/configuration}
 * @example
 * const autoCompleteJS = new autoComplete({config});
 * @param {Object} config - Configuration options.
 * @param {string} [config.name=autoComplete] - Prepended to all created DOM element class names.
 * @param {(string|Function)} [config.selector=#autoComplete] - Must point to or return the relevant input field or element that autoComplete.js should act upon.
 * @param {Object} config.data - Data source.
 * @param {(Array|Function)} config.data.src - Values to search or an async or immediate function that returns an array of values to search.
 * @param {string[]} [config.data.keys] - Only used if config.data.src is an array of objects. Specifies which keys in the objects autoComplete.js should search.
 * @param {boolean} [config.data.cache=false] - If true, autoComplete.js fetches all config.data.src when initialized and never again.
 * @param {Function} [config.data.filter] - Used to filter returns from config.data.src before showing them to the user. Signature: (Array), is given the results from config.data.src.
 * @param {Function} [config.trigger] - Return true if you want autoComplete.js to start. Signature: (event, query). Default trigger function returns true if input field is *NOT* empty *and* greater than or equal to config.threshold.
 * @param {Function} [config.query] - For manipulating the input value before running the search, for example if you want to remove spaces or anything else. Signature: (string), must return string, is given the raw input value.
 * @param {string} [config.placeHolder] - Placeholder to set on the input element. For example "Search...".
 * @param {boolean} [config.observe=false] - Uses a mutation observer to listen for when an input element is added to the DOM that matches config.selector, then creates the autoComplete.js configuration for it and stops observing.
 * @param {Number} [config.threshold=1] - Minimum number of characters required in the input before triggering autocompletion.
 * @param {Number} [config.debounce=0] - Delay in milliseconds after input for autocompletion to start.
 * @param {boolean} [config.wrapper=1] - Wraps the input element in a div for a11y purposes, adding some ARIA attributes.
 * @param {(string|Function)} [config.searchEngine=strict] - "strict" checks if the given query is contained within the data, "loose" returns every result where every character in the query is present in the data in any order and location. Signature: (query: string, record: any), given the manipulated query input and each data.src array entry or for each entry[config.data.keys].
 * @param {boolean} [config.diacritics=false] - Enable to normalize query and data values using String.normalize and by removing u0300 through u036f. See {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize}.
 * @param {(Object|boolean)} [config.resultsList] - false to disable result list rendering.
 * @param {string} [config.resultsList.tag=ul] - HTML tag to use for rendering the result container.
 * @param {string} [config.resultsList.id=autoComplete_list] - ID given to the result container.
 * @param {string} [config.resultsList.class] - Class names to give to the result container.
 * @param {(string|Function)} [config.resultsList.destination] - Selector that points to where you want to insert the result elements. Defaults to config.selector. Signature: ().
 * @param {string} [config.resultsList.position=afterend] - Position relative to config.selector where to insert the results list. See {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement#parameters}.
 * @param {Function} [config.resultsList.element] - Invoked before showing the results list. Allows manipulation of the DOM before it is added to the document. Signature: (list: HTMLElement, data: { query, matches, results }), where list is the container element.
 * @param {Number} [config.resultsList.maxResults=5] - Maximum number of results to render.
 * @param {boolean} [config.resultsList.tabSelect=false] - Allows the user to navigate the results list using Tab key. If disabled (as default), Tab key will close the list.
 * @param {boolean} [config.resultsList.noResults=false] - If enabled the results list will render when there are zero matches. For example if you want to show a custom message or help to the user in config.resultsList.element.
 * @param {Object} [config.resultItem] - Customize each rendered autocompletion result.
 * @param {string} [config.resultItem.tag=li] - HTML tag to use for rendering each result.
 * @param {string} [config.resultItem.id=autoComplete_result_index] - Prefix to use for the ID of each result element. _ and a number from 0 to maxResults is appended, so the final ID is for example "autoComplete_result_0" to "autoComplete_result_10".
 * @param {string} [config.resultItem.class] - Class names to give to each result element.
 * @param {Function} [config.resultItem.element] - Invoked before showing the results list. Allows manipulation of the DOM before it is added to the document. Signature: (item: HTMLElement, data: { match, value, [key] }).
 * @param {(boolean|string)} [config.resultItem.highlight=false] - Enable to highlight matching characters using HTMLMarkElement, or a string of CSS classes to add to any generated mark elements.
 * @param {string} [config.resultItem.selected] - CSS classes to add and remove from result items the user navigates to using the keyboard.
 * @param {Object} [config.events] - Allows adding custom or overriding internal event handling.
 * @param {Object} [config.events.input] - Maps event names to event handlers for the input element. Each key must be a valid event name, see {@link https://developer.mozilla.org/en-US/docs/Web/Events}, and each value must be an event handler function. Default handlers are keydown and blur.
 * @param {Object} [config.events.list] - Same as config.events.input, but for the result list container element. Default handlers are mousedown and click.
 */

[folknor]

Updated with config.wrapper.