Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jqueryUI autocomplete menu show effect

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!

like image 754
Saram Avatar asked Feb 18 '23 02:02

Saram


1 Answers

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

like image 200
Tyron Avatar answered Feb 21 '23 01:02

Tyron