Show dropdown on focus

[kohenkatz]

Right now, there is no focus event bound. That means that if the user types a few characters and then blurs the field, returning to the field does not show the dropdown again.

This may make sense for some uses, but the option to show the dropdown on focus is actually useful in two cases:

• Allow resuming selection if blurred without needing to type another character.
• Allow setting data-minchars="0" to show the options without anything having been typed yet.

I can submit a PR if you're interested.

[LeaVerou]

Yes, this was something I considered a lot. In some cases, it makes a lot of sense, but in the general case it would be annoying. The reason it wasn’t included was that I couldn’t decide what the API should be. Allowing minChars to be 0 makes a lot of sense.

[LeaVerou]

The problem with blur and focus is that they are also triggered when you leave the window and return to it, at least in Chrome :/

[kohenkatz]

Well you already have it disappearing on blur, so I figured that just complementing that with focus made sense.

[LeaVerou]

What I meant was, originally that’s what I had done, but it resulted in it disappearing and appearing every time I switched to another window. It was quite annoying. So I checked what other autocomplete widgets were doing and they made it disappear for good if the user switched windows.

[kohenkatz]

I started playing around with a simple implementation (http://jsfiddle.net/kohenkatz/fmgh29qo/2/), but JS's use of "falsey" values means that the existing code treats a 0 the same as not providing a value. It just means rewriting the elegant || fallthrough to something more explicit.

Maybe the window focus issue could be fixed in combination with the Page Visibility API. In other words, use only blur and focus events on the input that don't correspond to visibilitychange events. I'm guessing that that'll be a really nasty hack though, so it's probably not a good idea.

[fractaledmind]

FWIW, you can easily accomplish this behavior with the evalutate method along with setting the minChars value to 0. Using some simple jQuery:

var awesomplete = new Awesomplete(document.getElementById('awesomplete'), {
  minChars: 0
});
$('#awesomplete').on('focus', function() {
  awesomplete.evaluate();
});

[kritika-singh3]

Hello @LeaVerou, thanks for this plugin. I wish to know if there is any plan to bind the focus event on the input to evaluate.

[dimitriskd]

FWIW, you can easily accomplish this behavior with the evalutate method along with setting the minChars value to 0. Using some simple jQuery:

var awesomplete = new Awesomplete(document.getElementById('awesomplete'), {
  minChars: 0
});
$('#awesomplete').on('focus', function() {
  awesomplete.evaluate();
});

how could we do that if we wanted to do this behavior on each element with the class awesomplete?