This is great but one issue is that if there are two similar phrases in the completion list then the first tag automatically binds before the user has a chance to finish typing the second phrase. For example, if “tomato” and “tomato sauce” are both in the list, it’s impossible to tag “tomato sauce”. Is there a way around this?

Firefox doesn't have this problem but Safari does. For some reason, I can only type two characters in the tag box before I lose focus and have to click inside the input box again.

• Closes #28 -> Implemented with overflow-y scroll of Tagger container along with auto focus to input when clicking in container whitespace
• Closed #29 -> White space nowrap set along with fix for #28
• Modified CSS for tag display to ensure vertical margin between tags when wrapping is set to true
• Simplified CSS and removed styles related to old pre-datalist autocompletion

Input elements in Safari lose focus when the list attribute is added. As a workaround, we set a non-existing dataset id to disable auto-completion instead of removing the attribute. The list attribute is then set from Tagger initialisation.

Fixes #7

In tagger.d.ts, the type for the list property of the completion interface is set to the wrong type. It should be completion_list instead of completion. As is, the definition is circular and all type checking for the list property will fail.

Hi @jcubic ,

When we type in the field and without pressing comma /enter/space directly taking mouse out of the field then its not appending the value to main input as well its not getting convert like tag.

I tried to add the event on blur form tagger-new input but while firing keypress event, its not allowing because main field converting to hidden/readonly .

When badge for tags are added, links point to /tag/<tagname>, but we can't choose link prefix like:

my/route/tag/tagname or something like that. Or let user deactivate the link by href="# or use a span instead ?

tagger(input, {
    allow_duplicates: false,
    allow_spaces: true,
   use_links: false,
});

It will be a pleasure for me to improve the style of this title. and also it will be an opportunity for me to improve my skills in css

I send you a screenshot of the error

Thanks!

For example, I want to listen to the enter event and get the the strings out:

let tagger = tagger(document.querySelector('[name="tags"]'), {allow_spaces: false});

tagger.complete((results) {
  console.log(results); // []string
});

But that doesn't really work

This change makes two enhancements to autocomplete:

1. In _new_input_tag.addEventListener, the previous code would call the autocomplete function even if completion.min_length hadn't been met yet. This request corrects the logic so that the function isn't called unless the character limit has been reached.

2. In _build_completion, the previous code would allow autocomplete to suggest a tag that already existed, even if allow_duplicates was set to false. This request adds an array filter to remove existing tags from autocomplete options if allow_duplicates is false.

With the added ID, you can address the input using TAGS: and using the name, the input can still be processed if a user does not confirm the input with the Enter key

If you pass jQuery object as first argument component is created but the return object is not tagger object. Which in turn throws different error when you try to invoke a method.

Hi,

Thanks for this library.

Autocomplete only works after Ctrl+Space. Is there an option to make it work like the default behaviour of datalist (it doesn't need any keystroke to provide auto complete suggestions natively) ?

Events are required for proper use in React to have proper binding.

• [ ] on_change
• [ ] on_add
• [ ] possible on_create
• [ ] on_delete
• [ ] update React example to display all tags while they are changing

I was suggested to add this option to ignore case. The feature will be breaking change because it will force to ignore the case by default.

options will be maybe force_lowercase that is true by default.