Autocomplete - first item selected


Topic: Autocomplete - first item selected

meesha81 pro premium 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?


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.


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