CODEWITHSUNDEEP
jquery-uitwitter-bootstrap-3jquery-ui-autocomplete
Uder Moreira
Uder Moreira

Reputation: 932

Jquery ui autocomplete with bootstrap modal

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" );
    }
});

Upvotes: 0

Views: 3416

Answers (2)

PhilSparks
PhilSparks

Reputation: 1

Just add a link to one of the built-in themes that comes with JQuery UI. Then your problems will be solved. e.g. link rel="stylesheet" href="~/lib/jqueryui/themes/cupertino/theme.min.css"

Upvotes: 0

John - Not A Number
John - Not A Number

Reputation: 659

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.

Upvotes: 2

Related Questions