Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Autocomplete - first item selected

meesha81 priority asked 6 months ago


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?


meesha81 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.


meesha81 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 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


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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