1

I'd like to design for a text input control that automatically converts text matching an arbitrary pattern into "tokens," and then allows users to interact with those tokens as if they were text glyphs.

In other words, once those tokens are created, users can click them to select them, or drag over them to select more than one. The text cursor should move between them when the arrow keys are pressed (not between each letter inside of them) and pressing shift-arrow should select one token at a time, the same way it selects subsequent letters.

It seems like, from my research, there isn't currently a way to do this with HTML and CSS only. user-select in CSS lets you select all the text within an element at once, but not the element itself. I'd like to be able to use something like ::selection.token { border: 1px solid blue } to change the appearance of the inline-block element itself when it is selected.

This kind of functionality exists in native applications (functions in Apple Numbers, email addresses in Microsoft Outlook or Apple Mail...) but I don't know if I've ever seen it in a web application.

Has anyone solved this problem before, or done something similar?

EDIT: Since writing this, I've discovered a few jQuery/AngularJS plugins that get close to the functionality I'm looking for. Tokchi is the best one I've come across. (No online demo, unfortunately, so you'll have to download the plugin to check out the demo.) However, even this plugin doesn't have the kind of selection behavior I'm looking to create; selecting a token selects all the text within it, not the token itself.

Nate Green
  • 115
  • 12
  • Google Appengine's logging console has a similar feature where it tokenizes search parameters (https://cloud.google.com/logging/docs/view/logs_viewer#search_log_field_labels). I don't have access to the console anymore, so I'm not sure how it handles selections. – Nate Whittaker May 12 '16 at 13:57
  • @NateWhittaker Nice! The tokens are definitely the kind of thing I'm looking for, but with the ability to interact with them as if they were just glyphs of text. I have seen this kind of tokenization in Select2, Chosen, etc. but they don't allow you to drag-select or shift-select the tokens, only to delete them with the backspace key or by clicking the X button. – Nate Green May 12 '16 at 14:36
  • Can you be little more precise what do you mean by certain – codefreaK May 12 '16 at 19:36
  • @SachinDivakar I edited the question to clarify. Note that the important question isn't the string-matching-and-tokenizing part, it's the selecting-a-whole-element part. :) – Nate Green May 12 '16 at 19:53
  • https://jsfiddle.net/r444mL8g/1/ are you looking for anythign close to this tell me – codefreaK May 12 '16 at 20:42
  • @SachinDivakar Not quite. I'm looking for a way to select those tokens as if they were letters. This solution requires that all tokens be at the beginning of the input; I'm looking for something that allows me to move the text cursor between the tokens, select one or more of them, potentially enter text inbetween them, etc. – Nate Green May 12 '16 at 20:47
  • I will try to upload a GIF of the interaction I'm looking for within the next day or two...clearly it's hard to explain with words. :) – Nate Green May 12 '16 at 20:48
  • Yes exactly @NateGreen this is more of a creation of plugin job rather than a particular issue based solution it quite large in scope – codefreaK May 12 '16 at 21:05
  • @SachinDivakar Fair enough...I was hoping for someone to point me in the direction of a plugin that'd handled it already, or to explain (in high-level terms) the necessary moving parts to make this work. Maybe the question's not quite appropriate for SO, though. – Nate Green May 12 '16 at 21:15
  • @NateGreen The best example is the way tag is added to the stackoverflow when post a question that is a prime suggestion it almost encompasses all your requirements check this out http://stackoverflow.com/questions/519107/jquery-autocomplete-tagging-plug-in-like-stackoverflows-input-tags – codefreaK May 12 '16 at 21:18
  • @NateGreen Check out the pluggin and get back to me please – codefreaK May 12 '16 at 21:29

1 Answers1

0

TAG EDITOR PLUGIN PAGE

This is the most versatile tag editor plugin that I have encountered till now this plugin allows you to enter tags and also edit them and navigate through them .Which I think is what you are looking for based on your comments .And they can be dragged around and many more features like sortable etc

Overview and Features

Released under the MIT License. Source on Github (changelog). Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. IE7 technically works, but no care has gone into CSS/layout bugs. tagEditor depends on accursoft's caret plugin (1.1 kB minified).

Lightweight: 8.5 kB of JavaScript - less than 3.2 kB gzipped Edit in place tags Intuitive navigation between tags with cursor keys, Tab, Shift+Tab, Enter, Pos1, End, Backspace, Del, and ESC Optional jQuery UI sortable Optional jQuery UI autocomplete Copy-paste or delete multiple selected tags Duplicate tags check Custom delimiter/s Placeholder Custom style for faulty tags Public methods for reading, adding and removing tags + destroy function Callbacks Allows tabindex for form navigation Graceful degradation if JavaScript is disabled This plugin was developed by and for Pixabay.com - an international repository for free Public Domain images. We have implemented this piece of software in production and we share it - in the spirit of Pixabay - freely with others.

USAGE

Include the stylesheet jquery.tag-editor.css in the section of your HTML document - and the JavaScript file jquery.tag-editor.min.js after loading jQuery and optional jQuery UI sortable/autocomplete. Make sure to also load accursoft's caret plugin (1.1 kB minified). tagEditor accepts settings from an object of key/value pairs, and can be assigned to any text input field or textarea.

$(selector).tagEditor({key1: value1, key2: value2});

// examples

// assign tag editor to textarea - existing text will be used as initial tags
$('textarea').tagEditor();

// assign tag editor to text input with initial tags
$('input[type="text"]').tagEditor({ initialTags: ['tag1', 'tag2', 'tag3'] });

// use jQuery UI autocomplete
$('#my_textarea').tagEditor({ autocomplete: { 'source': '/url/', minLength: 3 } });
codefreaK
  • 3,376
  • 4
  • 29
  • 56