Fixes #2043: allows minLength of zero to enable show all for typeahead #5063

Closed
wants to merge 1 commit into
from

Projects

None yet
@michaelcox

Allows you to set a minLength of 0 for typeahead, in order to show all items in the list. For example, this allows you to show all items up front by binding to the focus of the control. This seems simpler and more flexible than a new option such as showAll or focusShow as suggested in other tickets.

Specifically, this also enables the technique @fat suggested in #3941:

$input.on('focus', $input.typeahead.bind($input, 'lookup')));
@michaelcox

Ugh. Build seems to be breaking in Travis. Let me see what I can do about that.

@michaelcox

There we go. Turns out phantomjs doesn't understand bind(). Switched to call() for the automated build process.

@Glideh
Glideh commented Oct 17, 2012

Very good idea !
Should that open the options when focused ?
Or should it generate a control button to show the list ?
Because for sure we should not have to type one character then delete it to show the full list.
I think it should behave like a select input.

@michaelcox

I think the goal here is to leave those questions up to an implementation detail. Some other tickets that have been discussed (and closed) implemented focus events and such. Instead, this is a small change that just allows the typeahead to show all items immediately (which currently isn't possible), leaving it up to the specific implementation on whether that happens on a focus event or some other trigger.

It also means this is a non-breaking change, since no new events are bound.

@Glideh
Glideh commented Oct 17, 2012

Yes I have indeed seen this comment #3941 (comment) but is it supposed to work yet ?
I was not be able to use it.
I understand the interest of triggering the lookup instead of handling it but I don't know how to do it.

@michaelcox

No, doesn't work until this change gets merged in.

@Glideh
Glideh commented Oct 17, 2012

Ha ok so for now we can't even workaround the issue ?

@michaelcox

Right, not possible at all now without taking my fork of the code.

@Glideh
Glideh commented Oct 17, 2012

Ok thanks

@fragnemesis

Such a simple yet useful fix!

This, along with the focus technique, makes for a pretty good equivalent of a combobox.

@mdo mdo closed this Nov 14, 2012
@tarcon
tarcon commented Nov 28, 2012

Still not implemented, is it?

@ReubenBond

I'm not sure why this was closed. The same change can be had by changing:

    if (!this.query || this.query.length < this.options.minLength) {

to

    if (typeof this.query !== 'string' || this.query.length < this.options.minLength) {

in Typeahead.prototype.lookup.

Is this not a desirable fix?

@mgodwin
mgodwin commented Jan 12, 2013

Why was this closed? This seems super useful.

@Yohn
Yohn commented Jan 12, 2013

it was closed when the 2.1.2-wip branch got removed.. it could be updated and sent to the 2.3.0-wip to try to get into the next release

@nbauernfeind

Yeah seriously, super useful. I'm surprised I can't do it already.

@mgcrea
mgcrea commented Jan 17, 2013

Just FYI, we've merged theses changed in AngularStrap & a odd behavior appeared "When you tab to the element it auto-selects the first suggestion that pops up". So it looks like it needs more work before being merged there.

check @nbauernfeind comment there:

jsfiddle demo showing the issue:

@mgcrea mgcrea referenced this pull request in mgcrea/angular-strap Jan 17, 2013
Closed

typeahead issue with data-min-length=0 #24

@michaelcox

I'm not sure how AngularStrap figures into this, but originally you had to create your own trigger. This was really only a 2 line fix to stop it from specifically preventing a minLength of 0. However, you still had to create a focus or click event on the box. So maybe don't trigger on focus, only add a click event? If the user starts typing, it will also trigger on the keyup, since that's the current functionality.

@mgcrea
mgcrea commented Jan 17, 2013

You can check the implementation there : https://github.com/mgcrea/angular-strap/blob/master/src/directives/typeahead.js#L39

It basically overrides bootstrap methods with the one provided in your PR.

For now the quick fix to support both tab-navigation through inputs and minLength=0 was to add a small delay to the lookup (and hopefully the tab keyup event will fire before it).

            element.on('focus', function() {
                setTimeout(element.typeahead.bind(element, 'lookup'), 200);
            });

Adding a specific onClick handler might be the way to go in order to get something clean/reliable.

@seasoup
seasoup commented Apr 20, 2013

With this fix, if I click on the item in the drop down instead of pushing "return", the dropdown opens back up again immediately. Has this been fixed, or am I doing something wrong? Thanks.

@ptnplanet

The pull request here does not satisfy an serious implementation. There are multiple problems with a query of zero length. Only half of them are addressed.

First, an empty query won't even process your list.
Second, the default matcher won't match any items with an empty query.
Third, the first element in the list is considered to be the best match and is therefor marked as active. This does not apply to empty queries.
Four (as meantioned above), the lookup method does not get fired on focus by default.

Showing the list on empty queries requires quite a lot of changes. These issues are also present in the 3.0.0wip branch.

@seasoup
seasoup commented Apr 21, 2013

Okay, just to let you know the use case for having a 0 length open up the dropdown, I have multiple filters for a chart, some have 10 values and others have 100s. People using the chart might not know what the filter possibilities are and when there are 10 values they should be able to see all of them, where there are 100s of possibilities I want them to see the first N possibilities so they see an example of what the filter values look like.

If the dropdown doesn't show up when they first focus on the input, then they cannot see the 10 values or the first N values and are presented with a completely empty input without knowing what they can select. Some people might use tab, arrow keys and the return button, but other will be using the good ol' mouse to click the input and then click the dropdown.

Thanks.

@ptnplanet

Yes, I get that. I am basically facing the same problems.

The issue with bootstrap's typeahead plugin is, that it was not designed to provide a drop-down style element, but an autocomplete solution. Thinking the other way round would be more practical: use a drop-down style element and filter the elements. There are multiple different solutions (such as jquery.ui.autocomplete, which again confuses with its name) that offer better drop-down style. Jquery.ui.autocomplete for example offers a wide range of options (and even a zero minLength) and will probably suite your needs far better than bootstrap's typeahead.

Also, consider, that the bootstrap team is not going to add to the typeahead in the not so distant future.

@seasoup
seasoup commented Apr 21, 2013

Yeah, was hoping to not have to add YAJN.. yet another javascript library.
Thanks, will probably use that solution in order to keep moving.

On Sun, Apr 21, 2013 at 7:54 AM, Philipp notifications@github.com wrote:

Yes, I get that. I am basically facing the same problems.

The issue with bootstrap's typeahead plugin is, that it was not designed
to provide a drop-down style element, but an autocomplete solution.
Thinking the other way round would be more practical: use a drop-down style
element and filter the elements. There are multiple different solutions
(such as jquery.ui.autocomplete, which again confuses with its name) that
offer better drop-down style. Jquery.ui.autocomplete for example offers a
wide range of options (and even a zero minLengthhttp://api.jqueryui.com/autocomplete/#option-minLength)
and will probably suite your needs far better than bootstrap's typeahead.

Also, consider, that the bootstrap team is not going to add to the
typeahead in the not so distant futurehttps://github.com/twitter/bootstrap/issues/2042#issuecomment-13169981
.


Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/pull/5063#issuecomment-16727085
.

@ptnplanet

Maybe this is of interest for you, @seasoup. I've created an extension to bootstraps typeahead-plugin: https://github.com/ptnplanet/Bootstrap-Better-Typeahead

@seasoup
seasoup commented Apr 22, 2013

Hey Phillip, if you're willing to share can you add an OSS license,
preferably MIT or BSD? Thanks.

On Mon, Apr 22, 2013 at 1:54 AM, Philipp notifications@github.com wrote:

Maybe this is of interest for you, @seasoup https://github.com/seasoup.
I've created an extension to bootstraps typeahead-plugin:
https://github.com/ptnplanet/Bootstrap-Better-Typeahead


Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/pull/5063#issuecomment-16768964
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment