Notelet Nodelet Autocompletion Utility

One of my favorite parts of the code editors we use is autocompletion of tags. When I type a

<p>

</p>

So then I thought, why not have this handy, dandy feature available while I am typing to my heart's content on E2?

The Quick Code

By using the Notelet Nodelet and a dash of Javascript I've created a way that will autocomplete tags in both writeup and scratch pad nodes. You can add any type you want as long as you know the name of the input box.

To get it working, simply put the following code in your notelet nodelet editor:

<script language="Javascript1.2" 
src="http://www.cornetdesign.com/autocomplete.js"></script>
<form>
<input type="button" value="start" onClick="selectForm('E2')">
<input type="button" value="end" onClick="doEnd()">
</form>

As always, you can transfer the .js file from my server to wherever you feel it is most comfortable. I will post code changes to this node, so you can cut and paste from there.

The JS Code

Below is to complete source to this utility. Feel free to modify and use however best fits your needs.

Notes: This has been tested in IE 5.5, IE 6, Phoenix 0.5, Netscape 7 and Mozilla 1.1. If you encounter any problems please let me know and I will post it here. Please note that this works at the end of your text in the input box. There is no good way to get the cursor position, thought I have some ideas of ways it might be able to be done.

Change Log:

• 5/14 - original code posted
• 5/15 - updated to allow for tags to have attributes like <table width="100%"> but still write out the correct </table> tag.
• 5/15 - handles the use of backspace when typing the tag

Code

//set at begin of capture
var oTheInput;
var isIE = false;
var isNN = false;
		
var captureIsStarted = false;
var captureToString = false;
var capturedString = "";

var startCharacter = "<";
var endCharacter = ">";

function captureIt(e){
	//see if captureIsStarted. If so, then we grab the value
	//if not, we see if the startCharacter was pressed. 
	
	if(typeof(window.event) == "undefined"){
		theCharacter = String.fromCharCode(e.which);
	}else{
		theCharacter = String.fromCharCode(window.event.keyCode);
	}
	
	if(captureIsStarted){
		//make sure that the character pressed was not the end character
		if(theCharacter == endCharacter){
			writeString();
			captureIsStarted = false;
                        captureToString = false;
                }else if(theCharacter == " "){
                        //stop capturing of string if a
                        // space is encountered
			//but keep capture started to find
                        // the end character
			//this allows for things like 
                        //<table width="100%">
			//to be completed with </table>
                        captureToString = false;
		}else{
                        if(captureToString){
			  capturedString += theCharacter;
                        }
		}
	}else{
		if(theCharacter == startCharacter){
			captureIsStarted = true;
                        captureToString = true;
		}
	}
}

function checkKey(e){
	if(captureIsStarted && captureToString){
		if(isIE){
		  theCharacter = window.event.keyCode;
		  if(theCharacter == 8){
			//user pressed backspace key
			capturedString =
                         capturedString.slice(0, capturedString.length - 1);
		  }
		}else{
		  theCharacter = e.which;
		  if(theCharacter == 8){
		    //user pressed backspace key
		    capturedString = 
                     capturedString.slice(0, capturedString.length - 2);
		  }
		}
	}
}

function doStart(oInput){
	init();
	oTheInput = eval(oInput);
	oTheInput.onkeypress = captureIt;
        oTheInput.onkeyup = checkKey;
}

function doEnd(){
        oTheInput.onkeyup = null;
	oTheInput.onkeypress = null;
	oTheInput = null;
}

function findForm(){
	//this function finds a form on the page
	//that contains an input or textarea box with the name
	//passed in via inputName
	
	if(arguments.length > 0){
		theInputName = arguments[0];
	}else{
		selectForm('E2');
		//break;
	}
	
	arrForms = document.forms;
	
	theForm = "";
		
	for(i=0;i<arrForms.length;i++){
		if(typeof(eval("document.forms[i]."+theInputName)) == "object"){
			theForm = "document.forms["+i+"]."+theInputName;
			break;
		}
	}
	
	if(theForm != ""){
		alert("Starting Capture");
		doStart(theForm);
	}else{
		alert("The form field you entered - "+theInputName+
			" - was not found");
		selectForm();
	}
}


function init(){
	if(typeof(event) == "object"){
		isIE = true;
	}else{
		isNN = true;
	}
}

function selectForm(){
	if(arguments.length > 0){
	switch(arguments[0]){
		case "E2":
		e2Win = window.open('','e2','width=200,height=200');
		theDoc = e2Win.document;
		theDoc.writeln("<html><body>");
		theDoc.writeln("<form>");
		theDoc.writeln("<select onchange='window.opener.findForm(this." +
			"options[this.selectedIndex].value);self.close()'>" +
			"<option>Choose a nodetype</option>");
		theDoc.writeln("<option value='writeup_doctext'>Writeup</option>")
		theDoc.writeln("<option value='skratch'>Scratch Pad</option>")

		theDoc.writeln("</select>");
		theDoc.writeln("</form>");
		theDoc.writeln("</html></body>");
		e2Win.focus();
		break;
	}
	}else{
		theFormName = prompt("Please enter the input name from the form");
		findForm(theFormName);
	}
}
		
function writeString(){
	//this is to correct a bug where IE inserts the value 
	//before the character is written and mozilla writes it after
	if(isIE){
		oTheInput.value = oTheInput.value + "></"+capturedString;
	}else{
		oTheInput.value = oTheInput.value + "</"+capturedString+">";
	}
	capturedString = "";
}