ThomasDev-de / bs-select

This jQuery plugin converts a simple select element into a bootstrap dropdown element. It offers numerous options, methods and events for further processing. It was developed on the basis of jQuery 3.6, Bootstrap 5.3 and Bootstrap icons.

Home Page:https://github.webcito.de/#bs-select

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Enable Enter Key and/or Arrow Keys

marc-gist opened this issue · comments

commented

When typing out a search, works great, however, it would be great if the user could press enter when the top most result is what he/she wants, or be able to use arrow keys to navigate down the remaining options to select one.

Hello and thanks for the inspiration.
The Enter key now selects the first visible element from the drop-down list.
The dropdown items are now anchor-tags, which manage the navigation of the arrow keys up and down.

commented

Hello and thanks for the inspiration. The Enter key now selects the first visible element from the drop-down list. The dropdown items are now anchor-tags, which manage the navigation of the arrow keys up and down.

Thanks, gave your latest code a quick try.
For some reason the onBeforeChange funciton no longer sends in the current select object, I just get undefined.

also, Enter key, not sure it works, as it then submits my form. so need to block that somehow (ideally your code does with a option set).

Arrow keys don't appear to do anything.

Thanks again!

Hello and thanks for the feedback,

the onBeforeChange function did not have a reference to its own select. I have given the function a parameter which refers to the current select (onBeforeChange($select){}). I hope this solves your problem?

$('select').bsSelect({
    onBeforeChange($select){
        alert($select.length);
   }
})

I could not replicate point 2 (pressing the enter key). I have tested it with selects in form elements and pressing enter does not submit my form. Can you give me a code example for this?

Hello again,
can it be that if you press the Enter key in the search field, the form is sent? If so, the problem was fixed in the last update. In addition, a new option onKeyDown and an event called keydown.bs.select were added. The event fires all keystrokes that do not belong to the bootstrap dropdown plugin (arrowDown, arrowUp and Escape)

commented

Thanks, I will try to test this out soon!

commented

The enter key now works! Thanks!
Up/Down arrows do not, until i press "tab", which is fine. Most of the time my site is likely to be used via mobile, not that i think of it. these features are moot in those use cases :)
I really enjoy the look of this over select2! thanks for making and continued updates!