Question

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

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

Answer 1

使用不同版本的jquery和jquery ui（调整自动完成下拉列表）对我有用。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

JSFiddle

Answer 2

这是一个有效的小提琴：

http://jsfiddle.net/gU5Tb/3/

您的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>

可调整大小的自动填充

2 个答案: