5

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

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

2 回答 2

0

它适用于不同版本的 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

于 2014-05-13T15:05:31.837 回答
0

这是一个有效的小提琴：

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>
于 2014-05-14T14:05:43.167 回答