jqueryUI autocomplete menu show effect

Question

I spend half of a day trying to apply fade effect for autocomplete drop down menu... The final result is very uncomfortable for me - look like 'lucky shoot', not real solution.

I used jqueryui default demo for example, and add lines:

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

The whole file looks like (© 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>

Can you suggest me better solution ?

Thanks!

Answer 1

Since you're using HTML5 there you could use CSS Transitions to do the Job.

Add/Remove a class on the open/close events of the Autocomplete Instance:

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

Then add following 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;
}

 Though I suppose you could do just the same method with the jQuery UI Fade to class method. Note: Will produce weird results when there's more than 1 Autocomplete on a page.

Example on JSFiddle

Answer 2

What about this? (no CSS needed)

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

Answer 3

If it helps, i've created a function that applies with each autocomplete in the project, maybe it can be improved, but it works

$(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 autocomplete menu show effect

Question

3 answers

solution1
4 ACCPTED 2012-12-20 22:53:59

solution2
1 2016-06-26 18:06:01

solution3
0 2018-01-25 14:42:16

jqueryUI autocomplete menu show effect

Question

3 answers

solution1 4 ACCPTED 2012-12-20 22:53:59

solution2 1 2016-06-26 18:06:01

solution3 0 2018-01-25 14:42:16

solution1
4 ACCPTED 2012-12-20 22:53:59

solution2
1 2016-06-26 18:06:01

solution3
0 2018-01-25 14:42:16