Overview

• Implement "pills" that are styled, clickable buttons that surround regions of text.
• Automatically create a pill after the user types text that matches terms from a list of words+phrases.

The goal is to improve text entry in index.html so that it detects when a person types a particular name, word, or phrase from a predefined list. When a match is detected, the name/word/phrase is replaced with a button ("pill") that has the same name/word/phrase as the text of the button. This happens right after the user finished typing text that matches any entry in the terms list.

This pill feature is similar to "mentioning" names on several social networks like Facebook and Google+:

Specifics

• When a key is pressed inside the div named "text-area":
  • Check the text nodes inside text-area for a substring that matches an element of the terms array.
  • Remove the matched substring.
  • In place of the removed substring, insert a button element with label text that is the same substring that was just removed.
  • Make sure the user's cursor/caret is placed after the newly-inserted button, so they can keep typing without losing their place.
• The word/phrase list to match against is contained in the terms array in index.js.
• The feature should be implemented using the text editing features of the HTML5 content-editable attribute applied to a <div> container. It should not rely on input or similar text editing components. The existing code in the repo already uses content-editable.
• The existing index.html page has a few paragraphs of placeholder text. Those can be removed for testing.
• It is safe to assume that the terms list will not have duplicate or overlapping elements.
• Include a screenshot of it working in your pull request.

I'm offering $100.00 on oDesk for someone to do this task: https://www.odesk.com/jobs/~01f63fa6237bc37417

Overview

• Typing '@' or '+' triggers an autocomplete box that follows the caret (cursor) to complete terms from the list and create a pill around the auto-completed text.

The existing code already generates the 'pill' that surrounds certain keywords and keyphrases. Your goal is to build on this code to include an autocomplete feature that also generates a pill once an option is selected from the autocomplete dropdown.

Mockup of desired effect:

Specifics

• Include screenshots (or an animated GIF) of it working in your pull request.
• The word/phrase list to match against is contained in the terms array in index.js.
• The autocomplete box can just be a list of the matching terms; it does not need to support images or any other elements surrounding the autocomplete list elements.
• Pressing the Enter or Return keys selects an item from the autocomplete box, when it is active.
• The autocomplete box should follow the typing/input of the user, instead of being stationary or docked at the bottom.
• Though typing @ or + triggers autocomplete, the '@' or '+' character should not be added to the input field. That default behavior should be prevented.
• Unlike in the mockup image, there should not be a duplicated input field below the user's caret.