Arrow keys to select items

[jackwlee01]

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]

I have the same issue

[ptrojanowski]

@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]

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:

• This plugin apply active CSS class to li, but item text to inner a (so we need two items if we won't change this plugin code)
• Bootstrap 4 by default uses slightly different markup for dropdown menu (with only one child item), and all styling is done directly for .dropdown-item.

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]

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

[schmijos]

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;
}