Jquery ui autocomplete with bootstrap modal

Question

I am creating a jquery-ui autocomplete list within a bootstrap layout and I'm with layout issues. My problem is that the list appears transparent, does not change color when the mouse is over the item, and are not respecting height. Can someone explain to me what is wrong? you need to use CSS in this case? I wanted to avoid having to modify the bootstrap to be able to reuse the code in other projects.

important: The autocomplete is inside of a bootstrap modal.

Here is the code I have done:

$(document).on("focus","#FormAlteracaoLocalizacao",function(e) {
    if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
        $(this).autocomplete({             //   call it
            open: function(event) {
                $('.ui-autocomplete').css('height', 'auto');
                var $input = $(event.target),
                    inputTop = $input.offset().top,
                    inputHeight = $input.height(),
                    autocompleteHeight = $('.ui-autocomplete').height(),
                    windowHeight = $(window).height();

                if ((inputHeight + inputTop+ autocompleteHeight) > windowHeight) {
                    $('.ui-autocomplete').css('height', (windowHeight - inputHeight - inputTop - 20) + 'px');
                }
            },
              source: '../asp/source.asp',
              minLength: 2,
              select: function( event, ui ) {
                  $("#FormAlteracaoLocalizacao").val(ui.item.label);
                  $("#FormAlteracaotxtCdLocalizacao").val(ui.item.value);
                  return false;
              },
              focus: function( event, ui ) {
                  $("#FormAlteracaoLocalizacao").val(ui.item.label);
                  $("#FormAlteracaotxtCdLocalizacao").val(ui.item.value);
                  return false;
              },
              select: function( event, ui ) {
                  $("#situacaoimpressora").focus();
                  return false;
              },
            change: function(event, ui) {
                console.log(this.value);
                if (ui.item == null) {
                  $("#FormAlteracaoLocalizacao").val(FormAlteracaoLocalizacao);
                  $("#FormAlteracaotxtCdLocalizacao").val(FormAlteracaotxtCdLocalizacao);
                } 

            }
        });
        $(this).autocomplete( "option", "appendTo", ".form-horizontal" );
    }
});

Answer 1

If you are using the jQuery-UI Autocomplete, then you'll need to use the associated jQuery-UI CSS for it in order for it to render correctly.