title: Jquery ui autocomplete with bootstrap modal
body: <p>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 <strong>transparent</strong>, 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.</p>
  
  <p>important: The autocomplete is inside of a bootstrap modal.</p>
  
  <p>Here is the code I have done:</p>
  
  <pre><code>$(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) &gt; 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" );
      }
  });
  </code></pre>