I’m working on a project that required some apparently previously unexpected UI controls. One of them, I decided should be made into a jQuery plugin and get some feedback from the community. I call it jquery.codeassist.

OK… so what the hell does it do?

The plugin creates a code assist menu within textarea and input fields, which allows users to select from a list of suggested values. This effect is triggered by the entry of a key character such as %, $ or [

So far, only %, $ and [ (with an optional closing key of ]) are supported–though, with some tweaks, I know I can get it to accept any input.

OK… but really, what the hell does it do?

It was built for the purpose of allowing users to enter dynamically replaceable code bits into textareas and input fields. A use case example would be if you are allowing users to create a page template or message template that will need to be filtered for the audience or some other situation involving different values for different pieces of data at a time. A user can enter in the code bits, which you can replace behind the scenes in the template.

OK… so is there a real world example?

Since the impetus for this plugin comes from a proprietary and as of yet unseen stealthy startup, I’m not at liberty to show the awesome reason why I found it necessary to create this plugin. But here’s a totally crappy and simple demo so you can see what the hell I’m actually talking about:
Crappy, Simple Demo

And you can download, fork and whatnot on github:
Source on GitHub

Issues I had with the implementation

Mouse position

The thing that is bugging me most at the moment is that I wanted the menu to appear where the mouse is. Simple enough, right? Just take a look at the triggered event pageX and pageY, right? Well, that would work if I was attaching to a mouse event–but the trigger for the menu is a key event, which doesn’t care about the position of the mouse. So to get around this, I’ve got a listener that’s caching the mouse coordinates so we can look at it when we need to:

// this is stupid but I can't find a better way to get the current mouse position
// since the key events don't contain the pageX and pageY 
// so following it around and caching the position :(
$(document).mousemove(function(e){
	codeassist.pageX = e.pageX;
	codeassist.pageY = e.pageY;
});

I am genuinely annoyed about this.

Cursor position

For sane browsers, you can simply access element.selectionStart to get the index that the cursor is positioned within the text. However, for IE, you have to hack up a nasty solution:

... // up here, we've defined el as the input, v as the current value of the input, and t = $(this), etc..
var before = ''; // text before cursor
if (el.selectionStart!==undefined){ // sane browser
	before = v.substring(0,el.selectionStart);
}else{ // IE
	t.focus();
	var range = document.selection.createRange();
	range.moveStart ('character', -v.length);
	before = v.substring(0,range.text.length);
}

follow on Twitter