bassjobsen / Bootstrap-3-Typeahead

The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4
1.68k stars 1.33k forks source link

Arrow keys to select items #285

Open jackwlee01 opened 7 years ago

jackwlee01 commented 7 years ago

I am using this with Bootstrap 4, and I cannot use the arrow keys to select item. Is there supposed to be support for selecting items in the autocomplete list with arrow keys?

ptrojanowski commented 7 years ago

I have the same issue

ptrojanowski commented 7 years ago

@jackwlee01 Looks like it's not a bug - bootstrap4 dropdown works in this way.

https://v4-alpha.getbootstrap.com/components/dropdowns/#single-button-dropdowns

oryol commented 7 years ago

Add to options of your typehead: item: '<li class="dropdown-item"><a class="dropdown-item" href="#" role="option"></a></li>'

Duplicate dropdown-item is required because:

So as result we have to use 2 elements (plugin limitation) but both should have same CSS class (Bootstrap 4 requirement).

Another option is to provide your own CSS for .dropdown-menu .active (change background)

cyth319 commented 7 years ago

what is the meaning to make an autocomplete without the keyboard functionality.

schmijos commented 6 years ago

As of https://github.com/bassjobsen/Bootstrap-3-Typeahead/commit/4c97c581839d9db31a3b1ec6dabd8d7fd2709ff3 you can use arrow keys to select elements from the dropdown list. If you want to have the same visual feedback as with hovering, some CSS is still needed:

.active .dropdown-item {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}