erming / tabcomplete

Easy tab completion for HTML inputs

Install

Manual install:

1. Download tabcomplete.js
2. Include source: <script src="tabcomplete.js"></script>

With NPM:

License

Available under the MIT license.

tabcomplete's Issues

Expected behavior

When I put a in the first example, it shows afghanistan but when I press tab it shows anything but Afghanistan. The textarea works as expected

Is that to be expected?

Add hinting

Fix issue with inputs scrolling sideways

Tab completion happens on Firefox when switching tab with keyboard, on textarea

This was noticed on The Lounge, which uses [email protected] (in case it's been solved since then), and now uses a textarea element.
Note that this bug was absent when using an input element.

See details and screencast of the bug in this issue: thelounge/thelounge#529.

So far a proposed fix has been made in thelounge/thelounge#541 by explicitly checking for !e.ctrlKey in the handler of the keydown.tabcomplete event. Is this an acceptable fix? From what I've looked, I couldn't find a better solution.

Case of entered text is not updated if "select" is used as hint

If the option hint is set to "select" then the case of the entered characters remains the same regardless of the case of the word it is being matched to.

My suggestion for a fix is to change this in line 144:

var text = options.hint == "select" ? value : [...]

To this:

var text = options.hint == "select" ? value.slice(0, -word.length) + word : [...]

Better demo

Add text selection

Hint not clearing properly

When programmatically emptying the input field the hint is not cleared, causing this issue;

Here's a GIF demonstrating the issue.

1. When typing something that does not exist in the filter array, pressing x (clearing) works as expected.
2. When typing something that does exist in the filter array, pressing x does not hide the hint. From reading through the code quickly I'd assume this is because it only clears the hint on backspace keydowns.
3. Hitting backspace to manually remove works as expected.

This is the on-click event for the x button

$clear.click(function(e) {
  e.preventDefault();
  $filter_by.val('').trigger('keyup').focus();
});

I've also tried

$clear.on('click', function(e) {
  e.preventDefault();
  var customEvent = $.Event('keydown');
  customEvent.which = 8 // Backspace key
  $filter_by.val('').trigger(customEvent).focus();
});

without success.

@erming, do you have any ideas how to solve this? I don't have time right now to properly read through this lib and do a PR :(.

Submit to cdnjs

Add support for <textarea>

Publish on bower, jQuery and npm

Display # of matches

API documentation

Accept functions