v10

[TarekRaafat]

Hello All,

v10 is just around the corner, and I'm looking forward to hearing your great ideas and suggestions on what would you like to have in the upcoming major version.

I've already tackled several new use cases and baked a lot of new features that will make autoComplete.js more powerful, capable, and easy to use. Let me share them with you for some inspiration.

New Features:

1. Automated inputField wrapping inside DIV
2. Automated resultsList scrolling
3. Enhanced & improved resultsList rendering and navigation
4. Enhanced & improved all eventEmitters
5. Improved ARIA support
6. New APIs for easier control, customization, and functionality extension
   1- Cursor "selection" position
   2- Cursor previous position
   3- resultsList close and open API
   4- resultsList navigation API with and without index
   5- resultsList open state API
   5- Result selection API by index
   6- Events API
   7- dataFeedback API
7. Enhanced & improved code structure and internals
8. Library size-reduction

Can't wait to hear your thoughts and ideas!

Cheers, and have a nice day! :)

[folknor]

Your changelog has very little information :-) I just downloaded https://raw.githubusercontent.com/TarekRaafat/autoComplete.js/v10/dist/js/autoComplete.js and will take a look!

One thing I see immediately is; right now, in 9.1.x, if I add a custom element to the list I need to do this

result.addEventListener("click", ev => {
	ev.stopPropagation()
})

to prevent autoComplete.js from running its click handler and closing the list. But of course this is not very futureproof or robust.

Now, in your v10 changes, I think I can do result.removeEventListener("click", acInstance._events.list.click), is that true, or am I misreading the code?

[folknor]

No, that's not true, I misread the code.

[folknor]

You only register for click on the list element, not each child.

[TarekRaafat]

That's correct, in v10 the navigation event listeners (click, keydown) are attached to the list instead of each list item.

So, you won't need to attach an event to any custom added element going forward.

[folknor]

Without reading the code in detail, I'm worried how this will react to custom elements added to the list:

					var resultItemElement = ctx.resultItem.element.toUpperCase()
					var items = Array.from(ctx.list.children)
					var item = event.target.closest(resultItemElement)
					if (item && item.nodeName === resultItemElement) {
						event.preventDefault()
						var index = items.indexOf(item) - 1
						selectItem(ctx, event, index)
					}

[TarekRaafat]

I'm not sure about the kind of reaction you're worried about, but if you're referring to the event listeners and navigation then don't worry it's tested and working perfectly fine so far. 🤞

[folknor]

Is this a bug?

361	var selectItem = function selectItem(ctx, event, index) {
362		index = index > -1 ? index : ctx.cursor
363		var list = ctx.list.getElementsByTagName(ctx.resultItem.element)
364		list[index]
365		var data = ctx.dataFeedback

Look at line 364, what does that do?

[TarekRaafat]

It's not a bug, this is the resultItem selection handler

[folknor]

For #207 maybe add something like

eventEmitter(
	{
		input: ctx.input,
		error: err,
	},
	"data-store-error"
)

When the dataStore Promise fails? It seems like it ends up silently ignored in the debounce just like in v9.x.

But maybe you have other ideas for my question in #207 :-)

[TarekRaafat]

Very good point, I'll make sure to take care of it in v10

[TarekRaafat]

I have added an error handler to the data.store that handles any error that happens during data.src fetching and you get the error details through the response event emitter details.

Check it and let me know your thoughts.