5

サイズ変更可能なオートコンプリートを作成しようとしています (これが可能かどうかさえわかりません!)。私はグーグルからアイデアを得るために多くのことを試みましたが、それを達成することができませんでした. 私が作成したコードはサイズ変更可能なメニューを作成しますが、テキスト ボックスの下部に配置されず、2 回目に検索するとサイズ変更オプションが消えます。それを修正する方法はありますか、またはこの機能を他の方法で実現できますか?

    <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

これが機能するフィドルです：

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 に答える
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 に答える