改变宽备-ui自动完成的单独部件

StackOverflow https://stackoverflow.com/questions/4607164

题

我的工作与多jquery-ui自动完成的部件在一个页面上，并希望能够设置宽度的每一个单独。目前，我做这样的：

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

这是不是一个真正的解决方案，因为该用户能够触发的各种自动完成，在不同的订单，并且这种代码，只是风格，它基于以便它们加入到DOM。

当自动触发，它似乎创建一个 <ul> 然后位置，它在输入框触发它。不幸的是，我找不到任何独特的标识符，在这个产生 <ul> 锁上以及应用一些CSS。

我的问题是不同的 这一个, ，因为我使用的是只是默认的自动完成的，而不是自动完成的-组合框。

此外，挖到自动完成的 <ul> 和匹配不同的自动完成的框宽度与价值观在列表内不工作，或者，由于价值观是动态生成的。

任何想法？

有帮助吗？

解决方案

我解决使用可用的“开放”事件这一问题。我需要一种方法来与其他项目动态设置宽度，沿，不想额外的标记。

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});

其他提示

我喜欢luqui的答案。但是，如果你在一个情况下，你不能使用appendTo功能（可能是由于溢出隐藏等），可以使用下面的代码，以确保您正在修改正确的列表。 

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

价： http://docs.jquery.com/UI/Autocomplete#method-插件

如果你有多个控制，使用自动完成的，合理的优雅的解决方案，是检索 widget 附加于控制在最后时刻，并修改其CSS:

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

看 演示.

如上所述，宽度的自动完成列表计算在最后一刻，因此必须修改它的 open 事件。

可以得到“UI菜单”插件附接至具有<input>自动完成相对于$('#myinput').data("autocomplete").menu的。因此，要改变宽度可以使用

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});

您可以换被触发自动完成在一个div，给DIV一个特定ID，然后追加自动完整的上行到该分区，而不是文档的正文中的输入框。这样，你可以与基于DIV + CSS瞄准它。

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script>

如果不使用额外的Javascript代码，你可以使用1个简单的CSS行：

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

那么，为什么与此工作的最小宽度

很简单，因为width被覆盖由JS，有时甚至与使用open: function(event, ui) { ... }解决方案（如 rkever的答案，该做在我的情况下无法正常工作）。然而，min-width的不会被覆盖下，所以它派上用场。

此外，如果你做的不希望使用 !important，您可以进一步详细其余类的规则：

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

这躲着我进一步JS黑客，希望它可以帮助！

我喜欢@马丁Lögdberg的答案，但如果你使用固定大小的宽度，而不是做对返回的结果一些花哨的数学设置宽度，那么你也可以只设置在CSS的宽度

ul .ui-autocomplete {
  width: 50%;
}

在马丁Lögdberg答案的改进。这更好的工作了我，因为我有很多文本框在页面上

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});

阅读API，我只是加个班的 UI-前以母公司的 DIV 我的输入，然后工作正常。 

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

请参阅这里：

  

[...]的输入字段的父母将被检查的一类   的 UI-前即可。如果与UI-前类的元素被发现，请菜单   将被附加到该元素即可。无论这个值的，如果没有   元件被发现，该菜单将被附加到主体上。

所附元件确定菜单的位置和宽度。

jQuery用户界面1.10如，插件被使用插件工厂。作为其中的一部分，自动完成现在包含一个 _resizeMenu 扩展点，这就是所谓时显示前上浆菜单。 

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});

我管理通过将浮到自动完成菜单用CSS解决这个问题。

.ui-autocomplete { float: left; }

由于自动完成菜单是定位absolute和<body>的直接子。我想它得到从身体它的最大宽度，并且由于它的位置绝对它不能被显示为内联块避免采取所有可用空间。

另外.ui-autocomplete { width: 1%; }似乎工作。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top