Question

我在bootstrap布局中创建了一个jquery-ui自动完成列表，我遇到了布局问题。我的问题是列表显示为透明，当鼠标位于项目上方时不会改变颜色，并且不符合高度。有人可以向我解释有什么问题吗？在这种情况下你需要使用CSS吗？我想避免修改引导程序以便能够在其他项目中重用代码。

重要：自动完成在引导模式中。

以下是我所做的代码：

$(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

如果您正在使用jQuery-UI自动填充，那么您需要使用相关的jQuery-UI CSS才能正确渲染。

Jquery ui autocomplete with bootstrap modal

1 个答案: