使 jQueryUI 自动完成高度取决于 parent

Question

我在 jQueryUI 对话框中有一个 jQueryUI 自动完成功能。对话框具有给定的高度（即 200 像素），因此自动完成的高度必须小于对话框，以便显示滚动条。我通过将 100px 的高度硬编码到自动完成来实现它。我怎样才能使高度取决于 parent 的高度，而不是对这个高度进行硬编码？

http://jsbin.com/xunazowiqa/1/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function() {
                var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];

                $("#open").click(function() {$("#dialog").dialog("open");});
                $('#dialog').dialog({
                    autoOpen    : false,
                    resizable   : false,
                    height      : 200,
                    width       : 400, 
                    modal       : true,
                    open        : function() {
                        console.log(this,$(this));
                        $(this).find('input').val('')
                        .autocomplete({source: availableTags})
                        .parent().next('ul.ui-autocomplete')
                        .attr('style', 'max-height: 100px; overflow-y: auto; overflow-x: hidden;')
                    }
                });
            });
        </script>
    </head>

    <body>
        <button id="open">Open</button>
        <div id="dialog" title="DIALOG TITLE"><input></div>
    </body> 
</html>

Answer 1

要修改 jquery 中的高度，请使用 .height() function。

使用它您可以读取任何元素的高度并根据您喜欢的任何计算为另一个元素设置它。

Answer 2

身高css属性有属性 inherit 从其父元素继承此属性。

Answer 3

你可以这样试试

console.log(this,$(this));
var height = $(this).height();
console.log(height);
$(this).find('input').val('')
.autocomplete({source: availableTags})
.parent().next('ul.ui-autocomplete')
.attr('style', 'max-height: 100px; overflow-y: auto; overflow-x: hidden;')

你可以把这段代码放在open函数中这段代码可以获取对话框的高度，之后可以自己管理。

使 jQueryUI 自动完成高度取决于 parent

Make jQueryUI autocomplete height dependent upon parent

javascript

jquery

jquery-ui