Question

我花了一半时间尝试为自动完成下拉菜单应用淡入淡出效果... 最后的结果对我来说非常不舒服 - 看起来像'幸运射击'，而不是真正的解决方案。

我使用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");
      };

整个文件看起来像（©for 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>

你能建议我更好的解决方案吗？

谢谢！

Answer 1

由于你在那里使用HTML5，你可以使用CSS Transitions来完成这项工作。

在自动填充实例的打开/关闭事件中添加/删除类：

$( "#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 to class方法做同样的方法。 注意：当页面上的自动填充次数超过1次时，会产生奇怪的结果。

Example on JSFiddle

Answer 2

这个怎么样？（不需要CSS）

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

Answer 3

如果它有帮助，我已经创建了一个适用于项目中每个自动完成的功能，也许它可以改进，但它可以工作

$(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');
});

jqueryUI自动完成菜单显示效果

3 个答案: