Friday, June 18th, 2010

Inline content assist for text fields and areas

Category: Component, JavaScript, Library

<p>Sergey Chikuyonok has created a really nice, easy to use, and good looking content assist library for input text fields and text areas:

It calculates precise position of characters in <textarea> or <input> tag and places completion proposals popup under it. You can explicitly call popup window to assist/replace word (depends on caret position) with Ctrl+Space (buggy in Firefox and Opera) or Alt+Space (buggy in Opera). The project is based on Eclipse IDE’s content assist architecture, it has some common class names and methods. The default implementation works with fixed words vocabulary, but developers can easily modify or extend some classes to match their needs.

The API is easy to use. For example:

javascript
< view plain text >
  1. var words = 'after,any,also,around,another,ask,again,air,away,animal,answer,america,awesome,amazing'.split(',');
  2. new BasicContentAssist(document.getElementById('input'), words, {visible_items: 5});

Related Content:

Posted by Dion Almaer at 5:12 am
5 Comments

++++-
4 rating from 2 votes

5 Comments »

Comments feed TrackBack URI

You might want to escape your <textarea>… :)

Comment by Skilldrick — June 18, 2010

Wow, this could be put to some really cool use! *gears start turning*

Comment by wantar — June 18, 2010

Would love to see how this works with a full dictionary lookup behind it. I wonder if there are plans to support remote lookups, as loading an entire dictionary in javascript probably isn’t feasible.

Comment by joshfraser — June 18, 2010

This is really cool! I added a CSS plugin for the content assist – not too advanced, but just something that I thought would be neat after seeing it.

The demo is here: http://briangrinstead.com/files/content-assist

Comment by briangrinstead — June 18, 2010

This would be a nice add on to phpMyAdmin for writing queries with table and field name autocomplete.

Comment by mcsnolte — June 22, 2010

Leave a comment

You must be logged in to post a comment.