可調整大小的自動完成

我一直在嘗試創建一個可調整大小的自動完成（我甚至不確定這是否可能！）。我已經嘗試了很多從谷歌獲得創意的東西，但一直未能實現。代碼我創建了一個可調整大小的菜單，但它沒有對齊到文本框的底部，當我第二次搜索調整大小選項時消失。有沒有解決這個問題的方法，或者是否可以通過其他方式實現這個功能？可調整大小的自動完成

<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帕克斯小提琴只能修復時間。如果第二次打開自動完成功能，則無法調整大小。怎麼修？ – 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

可調整大小的自動完成

回答

相關問題