リサイズ可能なオートコンプリート

私はリサイズ可能なオートコンプリートを作成しようとしていました（これが可能かどうかはわかりません）。私はGoogleからアイデアを得ることをたくさん試しましたが、それを達成できませんでした。コードサイズ変更可能なメニューを作成しましたが、テキストボックスの一番下には配置されていません.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>

出典

2012-10-19 Joshi

正確に何をしますか？ –

サイズ変更可能なコントロール機能（http://jqueryui.com/resizable/）のようなものが必要です。サイズ変更可能なコントロールのように、オートコンプリートメニュー（表示される結果）を縦横にサイズ変更できるはずです。 – Joshi

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-13 15:05:31

フィドルは私にとってはうまくいかない。 – Renan

@Oskars Pakers Fiddleは時間を固定するだけです。オートコンプリートを2回目に開くと、オートコンプリートはサイズ変更できません。直し方？ – Andrus

作品フィドルです：

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-14 14:05:43 Community

Chromeでテストしただけで、フォーカスを失った後は機能しません（サイズ変更なし）。 – Renan

リサイズ可能なオートコンプリート

答えて

関連する問題