Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to create a site that will allow you to type a sentence or passage of text, then click on words to bring up a list of synonyms (from an online API) and possibly authorized abbreviations from a list that I provide. Once clicked, it would replace that word with the word that was clicked on. It would function kind of like After the Deadline or a Javascript based spell checker.

Are there any libraries set up to make something like this easy, or what kind of Javascript do I need to be looking at? Are there any tutorials or examples for this kind of thing? I am aware that the source code for After the Deadline is available, but I only need a small portion of their technology, not all of the actual grammar and spelling check technology.

share|improve this question

JQuery UI Autocomplete has options for auto-completing multiple words, works with whatever data source, is pretty easy to use, and comes from a library a lot of support.

Since the data source is configurable you can do things other than auto complete, such as synonyms. It doesn't work on click though. I don't know of anything that works on the click, since users normally would expect the caret to move on click, but if you really want it to work that way you could probably call the same code from the onclick event, more or less.

share|improve this answer
Well I'm not really looking for autocomplete, more like a spell check behavior where you can click on the word after it is typed and see a list of synonyms or abbreviations. Like this but with a list of synonyms instead. – SilentD Sep 24 '11 at 1:35

After the Deadline uses TinyMCE, not a text area. This makes them able to decorate the edited text by underlining parts of the text, thing which wouldn't be possible in a <textarea />.

If you're not afraid deep into existent projects and if you can legally do it given their GNU GPL, you can use the After the Deadline code, taking only the part you need and throwing away everything else related to spell checking.

If, on the other hand, for any valid reason you want to start from scratch, it may not be too difficult if you use the contenteditable HTML attribute¹. When the user changes the content of a <div contenteditable="true" />, submit the changes to the server, get the list of synonyms, and decorate the <div /> by underlining the words which have synonyms. Once the user clicks on an underlined word, populate the list of synonyms.

¹ This attribute seems to be an HTML 5 one, but has a pretty good support in legacy browsers. I remember using it a few years ago, where HTML 5 wasn't so well known or used.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.