Tự động hoàn tất có thể thay đổi kích thước

Tôi đã cố gắng tạo một autocomplete có thể thay đổi kích thước (và tôi thậm chí không chắc chắn nếu điều này có thể!). Tôi đã thử rất nhiều điều nhận ý tưởng từ google nhưng không thể thực hiện được. Mã tôi đã tạo một trình đơn có thể thay đổi kích cỡ nhưng nó không được căn chỉnh ở cuối hộp văn bản và khi tôi tìm kiếm lần thứ 2, tùy chọn thay đổi kích thước sẽ biến mất. Có cách nào để sửa chữa hoặc chức năng này có thể đạt được theo bất kỳ cách nào khác không?Tự động hoàn tất có thể thay đổi kích thước

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

Nguồn

2012-10-19 Joshi

Chính xác bạn muốn làm gì? –

Tôi cần một cái gì đó giống như chức năng điều khiển có thể thay đổi kích cỡ (http://jqueryui.com/resizable/). Tôi sẽ có thể thay đổi kích thước menu tự động hoàn thành (kết quả được hiển thị) theo chiều dọc và chiều ngang giống như điều khiển có thể thay đổi kích thước. – Joshi

Nó hoạt động với tôi với các phiên bản khác nhau của jquery và jquery ui (thay đổi kích thước thả xuống tự động hoàn tất).

<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

Nguồn

2014-05-13 15:05:31

Fiddle không hoạt động đối với tôi. – Renan

@Oskars Pakers Fiddle hoạt động chỉ khắc phục được thời gian. Nếu tự động hoàn tất được mở ở lần thứ hai, nó không thể thay đổi kích cỡ. Làm thế nào để khắc phục ? – Andrus

Đây là một fiddle rằng hoạt động:

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

Phiên bản của bạn jQuery và jQuery UI không được tán thành.

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

Nguồn

2014-05-14 14:05:43 Community

Chỉ được thử nghiệm trên Chrome, không hoạt động sau khi mất tiêu điểm (không thay đổi kích thước có sẵn). – Renan

Tự động hoàn tất có thể thay đổi kích thước

Trả lời

Các vấn đề liên quan