Jquery ui 可调整大小的自动完成_Jquery Ui

Jquery ui 可调整大小的自动完成

jquery-ui

Jquery ui 可调整大小的自动完成,jquery-ui,Jquery Ui,我一直在尝试创建一个可调整大小的自动完成（我甚至不确定这是否可行！）。我尝试过很多事情，从谷歌那里获得想法，但都没能实现。我的代码创建了一个可调整大小的菜单，但它没有与文本框底部对齐，当我第二次搜索时，调整大小选项消失。有没有办法修复它，或者可以通过任何其他方式实现此功能 <head runat="server"> <title></title> <link href="~/css/1.8/jquery-ui.css" rel=

我一直在尝试创建一个可调整大小的自动完成（我甚至不确定这是否可行！）。我尝试过很多事情，从谷歌那里获得想法，但都没能实现。我的代码创建了一个可调整大小的菜单，但它没有与文本框底部对齐，当我第二次搜索时，调整大小选项消失。有没有办法修复它，或者可以通过任何其他方式实现此功能

    <head runat="server">
    <title></title>
    <link href="~/css/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="~/script/jquery/1.5/jquery.min.js"></script>
    <script src="~/script/jqueryui/1.8/jquery-ui.min.js"></script>

    <style>
        .ui-resizable-se
        {
            bottom: 0px;
        }
        .ui-autocomplete
        {
            background: silver;
            overflow-y: hidden; /* prevent horizontal scrollbar */
            overflow-x: hidden;
        }
    </style>
    <script>
        $(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"
        ];
            $("#tags").autocomplete({
                source: availableTags,
                open: function (event, ui) {
                    $('ul.ui-autocomplete').resizable();
                }
            });
        });

        $(function () {
            $("#ul.ui-autocomplete").resizable({
                handles: "se"
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="ui-widget">
        <label for="tags">
            Tags:
        </label>
        <input id="tags">

    </div>
    </form>
</body>
</html>


.ui可调整大小的se
{
底部：0px；
}
.ui自动完成
{
背景：银；
溢出-y:隐藏；/*防止水平滚动条*/
溢出x：隐藏；
}
$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags，
打开：功能（事件、用户界面）{
$（'ul.ui autocomplete'）。可调整大小（）；
}
});
});
$（函数（）{
$（“#ul.ui自动完成”）。可调整大小({
手柄：“se”
});
});
标签：

对于不同版本的jquery和jquery ui（调整自动完成下拉列表的大小），它确实适用于我

这里有一把小提琴：

您的jQuery和jQuery UI版本已弃用

<html>
   <head runat="server">
    <title></title>
    <link href="~/css/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="~/script/jquery/1.9.1/jquery.min.js"></script>
    <script src="~/script/jqueryui/1.9.2/jquery-ui.min.js"></script>

    <style>
        .ui-resizable-se
        {
            bottom: 0px;
        }
        .ui-autocomplete
        {
            background: silver;
            overflow-y: hidden; /* prevent horizontal scrollbar */
            overflow-x: hidden;
        }
    </style>
    <script>
        $(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"
        ];
            $("#tags").autocomplete({
                source: availableTags,
                open: function (event, ui) {
                    $('ul.ui-autocomplete').resizable();
                }
            });
        });

        $(function () {
            $("#ul.ui-autocomplete").resizable({
                handles: "se"
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="ui-widget">
        <label for="tags">
            Tags:
        </label>
        <input id="tags">

    </div>
    </form>
</body>
</html>


.ui可调整大小的se
{
底部：0px；
}
.ui自动完成
{
背景：银；
溢出-y:隐藏；/*防止水平滚动条*/
溢出x：隐藏；
}
$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#标记”）.autocomplete({
资料来源：availableTags，
打开：功能（事件、用户界面）{
$（'ul.ui autocomplete'）。可调整大小（）；
}
});
});
$（函数（）{
$（“#ul.ui自动完成”）。可调整大小({
手柄：“se”
});
});
标签：

您到底想做什么？我需要一些类似于可调整大小的控件功能（）。我应该能够像可调整大小的控件一样垂直和水平调整自动完成菜单（显示的结果）的大小。刚刚在Chrome上测试过，在失去焦点后不起作用（没有可用的大小调整）。@Oskars Pakers Fiddle只在固定时间内起作用。如果第二次打开“自动完成”，则无法调整其大小。如何修复？

<html>
   <head runat="server">
    <title></title>
    <link href="~/css/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="~/script/jquery/1.9.1/jquery.min.js"></script>
    <script src="~/script/jqueryui/1.9.2/jquery-ui.min.js"></script>

    <style>
        .ui-resizable-se
        {
            bottom: 0px;
        }
        .ui-autocomplete
        {
            background: silver;
            overflow-y: hidden; /* prevent horizontal scrollbar */
            overflow-x: hidden;
        }
    </style>
    <script>
        $(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"
        ];
            $("#tags").autocomplete({
                source: availableTags,
                open: function (event, ui) {
                    $('ul.ui-autocomplete').resizable();
                }
            });
        });

        $(function () {
            $("#ul.ui-autocomplete").resizable({
                handles: "se"
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="ui-widget">
        <label for="tags">
            Tags:
        </label>
        <input id="tags">

    </div>
    </form>
</body>
</html>