Question about Key Down Event Listener

[IIOhanaII]

Hello @sickdyd !

First, I'd like to thank you very much for this great component that I love !

I'm new to development, so it would probably sound like a silly question, but please:

how to access the filtered list of results pressing the down key ?

I think I've understood there's an array called "results" which contains this filtered list but I cannot figure out how to access it.

If I knew how to do it, I think I would understand how:

• to browse the filtered list with the up key and obviously the down key
• select an item pressing the enter key

Then, maybe I would need some extra help to style the results lines while browsing them 😅

Thanks! Arthur

[sickdyd]

Hello @abDevil,

right now it's not possible to access the whole list of results, but only the item the user clicked (handleOnSearch handleOnSelect on the demo). Implementing this feature should not be too hard though, so I'm looking into it.

The keyboard support is something that is not implemented as well yet, and could take some time before it's ready.

I will keep you posted on the progress.

Sorry, I made a mistake: I corrected my message.

[IIOhanaII]

@sickdyd, awesome ! 🤩 Thanks a lot !

[sickdyd]

Hello @abDevII,

I updated the search box to the version 3.0.0 3.0.1. Now onSearch will have the keyword and results as callback parameters. This will give you access to the results as the user types characters.

Let me know if this helps fixing part of your issue.

[IIOhanaII]

Hello @sickdyd,

Great! I'm digging into this and let you know as soon as I can.

Again, thanks a lot !

[IIOhanaII]

Hello @sickdyd,

🎉 I confirm I can now:

• browse the filtered list with the up/down key
• select an item pressing the enter key

Thanks a lot !

Unfortunately, I please need some extra help to style the results lines while browsing them.

I've thought about using querySelector to add style on the li element corresponding to its object within the results array.

It looks like this :

document.querySelector([title="${filteredResults[activeResult].description}"]).parentNode.classList.add("mystyle");

"filteredResults" is results array "activeResult" increments/decrements as down/up key is pressed "description" is my resultStringKeyName parentNode allows to reach li element

I don't know why I cannot apply any style this way whereas I can on the ul element when obviously adding another ".parentNode" to the above command line.

Could you please help me to apply styles on li elements ?

[sickdyd]

Hello @abDevII,

Can you post an example on codesandbox with the code you are using? It's going to make it easier for me to understand why it's not working.

[sickdyd]

Hello again @abDevII,

After fixing a bunch of bugs on RSA, I published the version 5.0.2. I believe some of the issues you were having were related to some of those bugs.

Anyway, I created an example on codesandbox where I apply a class my-style to a specific li element. To see it in action search for "JavaScript": it will add the class and you will see the change.

Let me know if this fixes your issue.

[IIOhanaII]

Hello @sickdyd,

Sorry for my late answer, it works ! 😍 Thanks a lot !

I still get some warnings about RSA:

I believe it is due to the dataset - that I'm using and which is provided by an API - which does not include any id.

If I'm right, would it please be possible to modify the code to handle the adding of li key value for this type of dataset ? Or do you please know a way to add ids to the response I get from the API ?

[johnnyboi91]

Or do you please know a way to add ids to the response I get from the API ?

You could do something like:

const newArray = response.map((item, idx) => ({
  ...item,
  id: `unique_id_per_item`
}))

so in your case, let's say that 'figi' is unique (per item), it would be:

const newArray = response.map((item, idx) => ({
  ...item,
  id: item.figi
}))

Hope this helps

[IIOhanaII]

Yes indeed! I should have thought about this ... Thank you very much @johnnyboi91 !