Typeahead.js: Using "open" on clicking the input

[patrykbuzowicz]

Hello,

I'm not sure how the .typehead("open") works.
My minLength setting is set to 0.
What I want is to make the dropdown appear (especially when empty) without typing anything not only when the input is focused and I push up/down arrows but also when I click the input with mouse.
I created a simple fiddle to illustrate what my goal is: http://jsfiddle.net/YxmF2/.
When you click on the input, you should get the dropdown appear.

If this is intented to be like this, then what's the purpose of .typeahead("open") ? And if so, is there a way to do what I want to do?

[vollnhals]

Hi,

i have the same problem. I want the dropdown to open when the user clicks into the typeahead input.

My current workaround is:

  $el.on("click", function () {
    ev = $.Event("keydown");
    ev.keyCode = ev.which = 40;
    $el.trigger(ev);
    return true;
 });

[vollnhals]

See http://jsfiddle.net/5xxYq/

[patrykbuzowicz]

This apparently works and I'm going to use it as a solution. Yet I am wondering what that "open" option is for actually. Is it a bug that I couldn't do what I wanted or the "open" has some other purpose?

[vollnhals]

My understanding is that “open” will only actually open the drop down if the typeahead code has already loaded content.
I did not find any way to trigger the loading of content directly.

On 31.03.2014, at 19:26, patrickmaster [email protected] wrote:

This apparently works and I'm going to use it as a solution. Yet I am wondering what that "open" option is for actually. Is it a bug that I couldn't do what I wanted or the "open" has some other purpose?

—
Reply to this email directly or view it on GitHub.

[patrykbuzowicz]

Then each time after hiding the dropdown the content is unloaded so clicking "open" after that does nothing. This seems weird to me and I'd really appreciate a comment from the authors.
I also have to say I admire your workaround a lot and I wouldn't come to this by myself, thanks!

[jharding]

The open and close states are pretty confusing – they really should have been named activated and deactivated. I'm hoping to address this confusion in the next release.

[HangingClowns]

I used to be able to use typeahead('val', 'Search Term') to trigger, and this would automatically open it. How do you do it, now? Seems programmatically this doesn't work anymore. Rather annoying, cause now all of my typeahead related tests are broken cause of this.

Can we have a fix for 10.2?

[tgoetz]

Having the same issue here, I also need to trigger a search when the field gets the focus (either by tabbing into it with keyborad or activating it with the mouse).

[HangingClowns]

I've temporarily solved my issue by going to version 10.1. @tgoetz you may want to do the same unless 10.2 has something special in it for you. I just wanted to be able to use a function to declare what the display name will be.

[tgoetz]

@HangingClowns Thanks for that hint! I also reverted to 10.1 and can confirm that it works as you described.

[tgoetz]

@HangingClowns But unfortunately it does not seem to work for my usecase: I want to trigger lookup and open the suggestions dropdown when the field gets the focus _without_ entering something. Already tried to set {minLength: 0} but was not able yet to trigger lookup.

[HangingClowns]

How to trigger a lookup without entering something? That doesn't make sense. I do know that "supposedly" (i'm saying that cause i couldnt' get it to work on 10.2) you can use .typeahead('open') to open up the drawer, but to enter in a lookup value without enter in text doesn't make sense? I think there's a function that may work for you: .typeahead('setQuery','val'). Otherwise, no idea. Seems like a strange usecase if I understand correctly.

[tgoetz]

@HangingClowns The usecase is like that:
I have two separate typeaheads for entering a zipcode and city. If user has already entered a zipcode and tabs into the city field, I'd like to open it instantly and present suggestions based on the current value of the zipcode entered (I already pass all the needed values as url parameters to the search engine).

[HangingClowns]

Might be able to jimmy-rig something in JS for that. Otherwise not sure.

On Fri, Apr 11, 2014 at 4:53 PM, Tom Götz [email protected] wrote:

@HangingClowns https://github.com/HangingClowns The usecase is like
that:
I have two separate typeaheads for entering a zipcode and city. If user
has already entered a zipcode and tabs into the city field, I'd like to
open it instantly and present suggestions based on the current value of the
zipcode entered (I already pass all the needed values as url parameters to
the search engine).

Reply to this email directly or view it on GitHubhttps://github.com/twitter/typeahead.js/issues/798#issuecomment-40183456
.

[tgoetz]

@HangingClowns Yeah, that's what I'm trying, but unfortunately without success yet.

[patrykbuzowicz]

If I am not missing your point, then you can do something like the following:
http://jsfiddle.net/5xxYq/1/
based on @vollnhals his workaround. The data provided for both typeaheads needs a replacement of course. The fiddle only shows how to trigger the typeahead

[tgoetz]

@patrickmaster Thanks for the link, I already had a look at @vollnhals example but could not reproduce it in my project. My suspicion is that this might be related to bloodhound, which I am using as the search engine. Could be that it doesn't "fire" the lookup with an empty value, investigating this right now.

[patrykbuzowicz]

Haven't used bloodhound yet, still I believe that this trick has nothing to
do with the data provider. Weird. Does hitting up/down arrow when this
input has focus trigger the typeahead when empty?

2014-04-11 11:10 GMT+02:00 Tom Götz [email protected]:

@patrickmaster https://github.com/patrickmaster Thanks for the link, I
already had a look at @vollnhals https://github.com/vollnhals example
but could not reproduce it in my project. My suspicion is that this might
be related to bloodhound, which I am using as the search engine. Could be
that it doesn't "fire" the lookup with an empty value, investigating this
right now.

Reply to this email directly or view it on GitHubhttps://github.com/twitter/typeahead.js/issues/798#issuecomment-40184639
.

[tgoetz]

@patrickmaster Ha! I switched again to typeahead 10.2 and now this is working based on your example. Thanks for your time!

[vasilevach]

Hi,
I would like to do the exact opposite. I don't know if this is the new fix, but I don't want "typeahead:opened" to trigger on mouse click in the field, I want it to trigger when the actual drop down appears. Can someone suggest me a workaround? My minLength is 1.

[yuvii]

The problem with binding the click event is that then - every click emulates a down press, which usually isn't desirable - think what happens if they click again on the input after the dropdown opened?

Instead - it turns out that the event typeahead:opened is actually triggered on focus and _not_ when the dropdown is open. i.e., this is a better workaround:

$el.on('typeahead:opened', function() {
    var ev = $.Event("keydown");
    ev.keyCode = ev.which = 40; 
    $(this).trigger(ev);
    return true
});

And see DEMO

p.s.
After further tests, it seems this may cause a problem in the situation where one would select a choice (or write something, whatever) and then decide to delete it. In that specific case, the event will choose the first option from the list instead - which is, again, a confusing behavior. The workaround is to test if there's a difference between the values before and after triggering the down event, removing the value if it changes, thusly:

$el.on('typeahead:opened', function() {
    var initial = $el.val(),
        ev      = $.Event("keydown");
    ev.keyCode = ev.which = 40; 
    $el.trigger(ev);
    if($el.val()!=initial)$el.val("");
    return true
});

And see updated demo

[jharding]

In v0.11 (should get released in the coming weeks), calling open will _actually_ result in the dropdown menu being shown. As such, I'm going to close this issue. Let me know if I'm misunderstanding the intent of this issue.

[yuvii]

@jharding Fantastic! That's very good to know :-)

[jmmaynard]

I hacked this to get it to display results without focus. It's working pretty well. I set highlight to false and it looks even better.

$(".typeahead").eq(0).val("a").trigger("input");
$(".typeahead").eq(0).val("");

[rizerzero]

@jmmaynard thak you !!!

$("#typeahead").focus();
$('#typeahead').typeahead('val', 'a');
$('#typeahead').typeahead('val', myVal+'');

to make it work i had to add a focus k;)