Dropdowns not shown on Bootstrap 4

[wtlyu]

I was curious if my usage is wrong.

Once a dropdown is about to show, it usually looks like <ul class="typeahead dropdown-menu" role="listbox">. However, these kind of dropdown-menu won't show unless I add .show by hand. like this:

<ul class="typeahead dropdown-menu show" role="listbox">

Any suggestions about this? I'm using Material Design for Bootstrap 4.1.1 which is based on Bootstrap 4 ( it won't change any Bootstrap behavior I think )

[codedge]

I cannot confirm this. For me it does not work too with Bootstrap 4.3.1.

There is most likely a problem with your datasource. The plugin expects to have a source like

[
  {"id": 1, "name": "name1"},
  {"id": 2, "name": "name2"},
]

So id and name should be in the source. If you have other identifiers use the displayText method to change it.

What works for me is:

<input type="text" class="form-control cat-typeahead typeahead"
                                   name="category" id="category" data-provide="typeahead" autocomplete="off">

$('.cat-typeahead').typeahead({
        items: 10,
        displayText: function (item) {
            return item.cat_title;
        },
        source: function(query, process) {
            let url = "{{ route('api.story-categories.autocomplete', ['query' => ':query']) }}";
            url = url.replace(':query', query);
            return $.get(url, function (data) {
                process(data);
            });
        }
    });

Works with BS 4.3.1 and latest Jquery 3.11.1.

[bigalnz]

I can't get it to go with BS4. Everything seems ok, but no dropdown appears.