bassjobsen/Bootstrap-3-Typeahead

Bootstrap 4 no highlight of element in list

Serhioromano opened this issue · 8 comments

Serhioromano commented

There is list like this

<ul class="typeahead dropdown-menu" role="listbox" style="top: 38px; left: 0px; display: none;"> 
   <li class="active">
        <a class="dropdown-item" href="#" role="option"><strong>Gr</strong>apes</a>
    </li>
</ul>

It adds an active element to LI but in BS 4 you have to add an active element to a link. I suggest to add it to both.

aaronbarzilai commented

Any chance you could provide an example of how to do that @Serhioromano? Would be much appreciated. Thanks!

Edig commented

This is because the css class changes in bootstrap 4 I create this class as "work-around"

`
.typeahead .active, .dropdown-item:hover {
z-index: 2;
background-color: #007bff !important;
border-color: #007bff !important;
}

.typeahead .active .dropdown-item {
color: white !important;
}
`

divadsn commented

This is because the css class changes in bootstrap 4 I create this class as "work-around"

`
.typeahead .active, .dropdown-item:hover {
z-index: 2;
background-color: #007bff !important;
border-color: #007bff !important;
}

.typeahead .active .dropdown-item {
color: white !important;
}
`

Well if you would have read the source code I linked in my reply above, you would notice that you only need to set the theme option to bootstrap4 on initialize.

Therefor the entire issue is obsolete and to be closed.

@bassjobsen please include that option in the docs on the README.

https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js#L742

Edig commented

@divadsn Yes I try it and it didn't work for me, or maybe I',m calling bad the theme

newArticle.find('.article-input').typeahead({ source: articles, autoSelect: true, fitToElement: true, showHintOnFocus: true, theme: 'bootstrap4' });

divadsn commented

@Edig the preview from my reply is done using the following code:

    $('#search').typeahead({
        items: 10,
        minLength: 2,
        delay: 200,
        theme: 'bootstrap4',
        fitToElement: true,
        changeInputOnSelect: false,
        changeInputOnMove: false,
        source: function(query, process) {
            $.get('./search?q=' + query, function(data) {
                return process(data);
            });
        },
        ...
    });

Using recent minified version from this repo.

aaronbarzilai commented