Using jQuery tokeninput and text together

Question

I want the user to give me a long string value in a TextBox in my ASP.NET MVC application. In the string, if the user enters a word that I already have in my system, I want to display it with a jQuery token.

This is better explained with an example:

Let's say the phrase user is entering is "I drink coffee every morning except Sunday mornings." In this example, let's say I already have the words "coffee" and "Sunday" in my database with their respective ID's e.g. coffee Id: 123 and "Sunday" Id: 7789

What I'm trying to do is that as the user types the phrase, I want to automatically replace the words "coffee" and "Sunday" with their jQuery inputtokens. The idea is that I identify each word with its own ID if possible i.e. coffee is 123 and Sunday is 7789.

So when I save this phrase in my system, I may store it as "I drink [Id:123] every morning except [Id:7789] mornings". However, the user sees the phrase as he/she entered it except the familiar words are represented as jQuery tokens.

I could use some help in creating this behavior.

Answer 1

This would be possible using jQuery TokenInput. (Download the latest version from Github for freetagging functionality, rather than the old 1.6.0 from the website.)

I did something similar for a text translation based project, where phrases which weren't found in the dictionary were shown differently. Instead of having 'tokens' and 'non-tokens', everything will be a token, just some tokens can be styled through adding a CSS class to look like normal text.

With TokenInput, make sure you set allowFreeTagging:true to be allowed to enter non-dictionary words. I'd imagine you'd want space to 'submit' a tag, and treat each word individually. Then make use of the onFreeTaggingAdd() call back to add a new css class to those tags which are not in your dictionary. The CSS would simply be a matter of removing all the borders, background-colour and padding which are put round the text to make it look like a 'number'. I believe you should also be able to get rid of the delete button on each token, either through the options, of with a simple modification to the codebase.