Delete a suggestion

[MStrecke]

If I use the browsers autocomplete function I can delete a suggestion by highlighting an entry and hitting delete.

Is it possible to mimic this behavior with autoComplete.js, e.g. by a call-back to the web server via Ajax?

The keyDown event fires regardless if the pull-down menu is shown or not...

[folknor]

Yes, that is possible. The pulldown menu can contain whatever HTML you want, so you can add a dedicated button per row to delete it, and you can also listen for the open event to know that the results list is open, and the close event for when it isn't.

Or you can use the navigate event, which triggers when a result item in the list is highlighted.

Then you store the item ID, listen for the delete key in keydown, and so forth.

[MStrecke]

Thanks for the fast answer. It seems that I can't listen to the navigate event.

I added a listener to the configuration as shown below. I get a response on the console for keydown, open and close, but not for navigate.
I even attached the listener "manually" as shown in the example you've pointed to. No response there either. What am I missing?

            events: {
                input: {
                    selection: (event) => {
                        const feedback = event.detail;
                        const selection = feedback.selection.value[feedback.selection.key];
                        autoCompleteJS.input.value = selection;
                    },
                    navigate: (event) => {
                        console.log("navigate", event);
                    },
                    open: (event) => {
                        console.log("open", event);
                    },
                    close: (event) => {
                        console.log("close", event);
                    },
                    keydown: (event) => {
                        console.log("keydown", event);
                    }
                }
            }

Thanks

[folknor]

It only triggers if the list is open and the number of shown results is more than 0.

[MStrecke]

I thought so as well...

But I only see the open and close messages on the console when the resultList is opened and closed.
And not a single navigate message when I move the selection bar with the mouse.

This is a Firefox screenshot from the console.

You can see:

• How the library is loaded from the internet.
• The log message when I pressed "e".
• The Ajax-Request to the back-end with the string "e".
• The "open" log message when the library opens the result list
• But when I move the red bar up and down, nothing happens.

I tried putting the log command into "events: list: navigate" , and I tried adding it "manually" to the input field - no luck.

It should work but I'm obviously missing something.

[folknor]

@TarekRaafat Might be a bug here? I don't know :-)

[MStrecke]

Thanks you again for your insight...

I had a look at the source code of autoComplete.js ... and it's not a bug, it's just not a feature.

It seems that the navigate event is only triggered if the "cursor" is moved with the up- and down arrow keys (something that I wasn't able to do either). The application is listening for keydown events, processes them and in turn generates the navigateevent.

If I move the selection with my mouse the color change is only due to the CSS attribute hover. The application itself is unaware of these changes and can't report them. This would involve monitoring the mouse movement and I haven't found any indication that autoComplete.js is doing that.

When I click on an item, the mouse click generates an event that autoComplete.js is listening to. It gets the appropriate item and reports it back.

So, unfortunately the answer to my question is: no.

[folknor]

No, the answer is "yes", you just need to find out which element is under the mouse when the user hits the Delete key, which is simple: https://caniuse.com/?search=pointer-events

And like I said in my initial answer you can just add a button to each row as well.