Topic: Autocomplete - first item selected
Is possible to set first item in autocomplete as "selected"?
Something like option: firstItemSelected or run some method/event
Use case is: Jump to input with autocomplete search by keyboard (without mouse). Put some letters which show result and you would like to set by enter first one, but no item selected.
Do you know how to set first item as "active" (selected) when update.mdb.autocomplete event triggered?
Kamila Pieńkowska staff answered 6 months ago
To select element with keyboard you type then using arrows select item then confirm with enter.
If you want different behavior you would need to add custom listeners and custom code.
meesha81 pro premium priority answered 6 months ago
I understand that I can go with arrow down and enter. There is not available way (I don't know it) how to do it. If I call keydown/up for keycode for arrow down, no action. I don't know which element should be triggered by arrow down keycode. Do you know which one?
In some old version there was propably something like selectFirst: true|false option
Grzegorz Bujański staff commented 6 months ago
We don't have this option, but you can do it easily: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/6136009#js-tab-view
meesha81 pro premium priority answered 6 months ago
Okey, thank you for snippet. I can see the way how to do it. I try to do hover first item by arrow down, but I can't do it. Your way is check Enter and do custom action for enter. Okey, I understand. First item is not "gray"as active, but it can be explained to users that they can do enter. Please leave snippet active for some days...
meesha81 pro premium priority answered 6 months ago
Hi, your snippet is not working fine, because ignore cursor position. If you have cursor on some item, Enter select always first line. I know, I have to detect if some item is "active" and decide if Enter will be catched or not.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.0
- Device: PC
- Browser: Chrome
- OS: PC
- Provided sample code: No
- Provided link: No