Question

For example say i have a text box and a hidden div called suggestions

$("#suggestinput").on({
  keyup: function(){
    $("#suggestions").addClass("active");
  },
  blur: function () {
    $("#suggestions").removeClass('active');
  }
 //another event to know if input is empty while on focus, then removeClass('active');
});

The first event is when the user types in the input show suggestion, the second one is blur, so when the user unfocuses on the input the suggestions el will hide, i want a third event to check while on focus if the input is empty remove active class.

Working example is here thanks: http://jsfiddle.net/HSBWt/

Answer 1

Try this – http://jsfiddle.net/HSBWt/1/

$("#suggestinput").on({
  keydown: function(){
    $("#suggestions").addClass("active");
  },
  blur: function () {
    $("#suggestions").removeClass('active');
  },
  keyup: function () {
      if ( $(this).val() == "" ) {
        $("#suggestions").removeClass('active');
      }
  }
});