jQuery Autocomplete Results Not Highlighted/Underlined

I have a search bar with autocomplete that looks like this:

Attached is my code:

HTML:

<form
    method="GET"
    action="{{ URL('schedulizer/results') }}"
    accept-charset="UTF-8"
    class="form-inline global-search" role="form">
    <div class="form-group">
        <input
            type="search"
            class="form-control floating-label"
            id="q"
            name="q"
            placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045"
        >
    </div>
    <button type="submit" class="btn btn-material-teal shadow-z-1">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form>

JS:

$.ui.autocomplete.prototype._renderItem = function( ul, item){
        var term = this.term.split(' ').join('|');
        var re = new RegExp("(" + term + ")", "gi") ;
        var t = item.label.replace(re,"<b>$1</b>");
        return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + t + "</a>" )
                .appendTo( ul );
    };

    // once page loads, make AJAX request to get your autocomplete list and apply to HTML
    $.ajax({ url: '{{ URL('autocomplete') }}',
        type: "GET",
        contentType: "application/json",
        success: function(tags) {
            $( "#q" ).autocomplete({
                source: tags,
                minLength: 2,
                delay: 0,
                select: function(event, ui) {
                    $('#q').val(ui.item.value);
                }
            });
        }
    });

CSS:

.ui-autocomplete {

  .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;

    &.ui-state-hover, &.ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: red;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
    }
  }
}

The issue I have with this is, when I am scrolling down the results using my ^ and v key, the results within the autocomplete do not get highlighted/underlined. Only when I use my mouse to hover over the results, do my results get underlined.

I have some custom CSS that renders a Boostrap-like theme onto the autocomplete, and what I did was, I changed the parameters and added a background-color of grey, or render an underline on the active text, however, I was unable to fix the issue with using the arrow keys to navigate the autocomplete and underline/highlight the results.

I would love some assistance.

via Chebli Mohamed