twitter / typeahead.js

typeahead.js is a fast and fully-featured autocomplete library
http://twitter.github.io/typeahead.js/
MIT License
16.52k stars 3.2k forks source link

Autocomplete on default Suggestions should not happen #1341

Open WolfspiritM opened 9 years ago

WolfspiritM commented 9 years ago

Thank you for this great library.

Currently I'm working on a big form which users will fill using TAB. I have a few Typeahead inputs in the Form and they display default suggestions once the user enters the field so the user knows what he might like to enter. It happens that Fields need to stay empty, but as soon as the user enters a Typeahead Field he is unable to escape this field via Keyboard without entering something. As soon as he presses TAB the first default suggestion is selected instead of the cursor being handed over to the next input field. I'm not sure if this is intended but for me it looks like a bug or a usability issue.

nickpearson commented 9 years ago

I found a case on the examples page that may be related to this issue. If you type Kansas into the first field and press the Tab key, the field is autofilled with Arkansas even though Kansas is an exact match (though not the first match).

WolfspiritM commented 9 years ago

That issue is only slightly related. The issue in the examples page is just using a simple substring comparer but in production you should use something "better". Like the levenshtein distance for example. That will cause exact matches to be at the top of the resulting matches. I made an example for this here: http://jsfiddle.net/mhx75r02/ (the numbers behind the results is the levenshtein distance and is only there as an example. (remove the for loop under // For demonstration:)

With removing the substringcomparer (especially the if) and just using levenshtein it even autocompletes typing errors and abbreviations (Try typing "Vrmnt" and press TAB): http://jsfiddle.net/mhx75r02/1/

DHainzl-Seekda commented 9 years ago

I think I am having the same problem, but I'm not 100% sure what you mean. Is this the case you are facing:

In the examples page in the "Default Suggestions" section, if you enter the field and press "Tab" (without entering something) it automatically selects the "Detroid Lions" (the first element) without it being suggested?

WolfspiritM commented 9 years ago

Yes. That's exactly the issue. There is no way for the user to just Tab through the fields. It can be canceled however by pressing ESC before pressing TAB, but that's not really intuitive. Users might just TAB through the Form and enter the default suggestion out of accident.

DHainzl-Seekda commented 9 years ago

This fixes the problem:

DHainzl-Seekda/typeahead.js@3fceb14d01cf606652ed10008c8f648d8b110386

I did not want to open up a pull request just yet because I could not write a test for it. I tried writing an integration test but I could not find out how to run it locally ... Any help how to test this would be appreciated :)

devmi commented 8 years ago

DHainzl-Seekda/typeahead.js@3fceb14 helped me, but it caused deleting the input value on tabbing through the input on a loaded form. The following fix enhances it, if the menu contains the exact value as an entry:

devmi/typeahead.js@995f2f2

It works for me, using Bloodhound local dataset with limit larger than total of items and values including any saved selection.