jqueryUI自動完成菜單顯示效果

我花了半天的時間嘗試應用淡入淡出效果的自動完成下拉菜單... 最後的結果對我來說非常不舒服 - 看起來像'幸運射擊'，而不是真正的解決方案。jqueryUI自動完成菜單顯示效果

我使用jQueryUI的默認演示例如，加入行：

var acMenu = $("#tags").data().autocomplete.menu.activeMenu; 
acMenu._basehide = acMenu.hide; 
acMenu.hide = function(){ 
     this._basehide("fade","slow"); 
     }; 
acMenu._baseshow = acMenu.show; 
acMenu.show = function(){ 
     this._baseshow("fade","slow"); 
     };

整個文件看起來像（©爲www.jqueryui.com）：

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Autocomplete - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <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 
    }); 

    var acMenu = $("#tags").data().autocomplete.menu.activeMenu; 
    acMenu._basehide = acMenu.hide; 
    acMenu.hide = function(){ 
      this._basehide("fade","slow"); 
      }; 
    acMenu._baseshow = acMenu.show; 
    acMenu.show = function(){ 
      this._baseshow("fade","slow"); 
      }; 

    }); 
    </script> 
</head> 
<body> 

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags" /> 
</div> 


</body> 
</html>

您能否提供我更好方案？

謝謝！

來源

2012-12-20 Saram

既然您使用的是HTML5，那麼您可以使用CSS轉換來完成作業。在自動完成實例的打開/關閉事件

添加/刪除類：

$("#tags").autocomplete({ 
    source: availableTags, 
    open: function() { $('ul.ui-autocomplete').addClass('opened') }, 
    close: function() { 
    $('ul.ui-autocomplete') 
     .removeClass('opened') 
     .css('display','block'); 
    }, 
});

然後添加下面的CSS：

.ui-autocomplete { 
    opacity: 0; 
    display: none; 
    transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -webkit-transition: opacity 1s; 
    -o-transition: opacity 1s; 
} 

.ui-autocomplete.opened { 
    opacity: 1; 
}

雖然我想你可以做一樣的方法與jQuery UI Fade類方法。 注意：當頁面上有多個自動完成時，會產生奇怪的結果。

Example on JSFiddle

來源

2012-12-20 22:53:59 Tyron

感謝名單，以便快速＆真的很好的答案。它解決了我的問題。 – Saram

好的和簡單的解決方案，很好的工作。 – Obsidian

這將工作，而不需要在.opened類上額外的轉換。轉換隻需要在原始元素上。 – GreatBlakes

這個怎麼樣？（沒有CSS需要）

$("#tags").autocomplete({ 
    source: availableTags, 
    open: function() { $('ul.ui-autocomplete').hide().fadeIn() }, 
    close: function() { $('ul.ui-autocomplete').show().fadeOut() } 
});

來源

2016-06-26 18:06:01 Aberel

如果有幫助，我已經創建了一個與項目中的每個應用自動完成的功能，也許可以得到改善，但它的工作原理

$(document).on('autocompleteopen', function(event, ui) { 
    $(event.target).autocomplete('widget').hide().fadeIn('fast'); 
}).on('autocompleteclose', function(event, ui) { 
    $(event.target).autocomplete('widget').show().fadeOut('fast'); 
});

來源

2018-01-25 14:42:16

jqueryUI自動完成菜單顯示效果

回答

相關問題