autoComplete

Emulates the classic autoComplete behaviour in HTML forms.

It offers suggestions based on the order they're embedded.

Example

I've pre-populated this test field with a list of planet and moon names from our solar system.

autoComplete:

Example Source

File Source

/*--------------------------------------------------------------------

autoComplete for form text boxes

Kieran Huggins, Nov 2005
http://kieran.ca

Usage Example:

Version History:

2005.11.01 - First release
	feeds off local attribute 'autocomplete' (CSV), no AJAXy crap... yet
	currently forces whatever capitalization is in the autocomplete list
	completely highjacks the element's onkeyup event, so it won't play nice with others :-(

--------------------------------------------------------------------*/

function autoComplete(){
	var inputs = document.getElementsByTagName("input");
	// find all the inputs to autocomplete
	for(i=0;i<inputs.length;i++){
		if(inputs[i].getAttribute('autocomplete')){
			inputs[i].onkeyup = function(e){ // anonymous function is the way to go for now
				if (!e) var e = window.event;						// these two lines make the 
				var kc = e.keyCode || String.fromCharCode(e.which); // function IE compatible
				switch(kc){
					case 38: //up arrow  
						return true; break;
					case 40: //down arrow
						return true; break;
					case 37: //left arrow
						return true; break;
					case 39: //right arrow
						return true; break;
					case 33: //page up  
						return true; break;
					case 34: //page down  
						return true; break;
					case 36: //home  
						if(e.shiftKey) setSelectionRange(this,'0',this.value.length);
						return true; break;
					case 35: //end                  
						return true; break;
					case 13: //enter  
						return true; break;
					case 9: //tab  
						return true; break;
					case 27: //esc  
						return true; break;
					case 16: //shift  
						return true; break;
					case 17: //ctrl  
						return true; break;
					case 18: //alt  
						return true; break;
					case 20: //caps lock
						return true; break;
					case 46: //delete 
						replaceSelection(this,'');
						return true;
						break;
					case 8: //backspace  
						replaceSelection(this,'');
						this.value = this.value.substring(0,(this.value.length-1));
						break;
					default: 
						break;
				}

if(this.value==''){ // don't match an empty string
					return true;
				}

var opts = this.getAttribute('autocomplete').split(',');
				replaceSelection(this,'');
				for(i=0;i<opts.length;i++){
					opts[i] = opts[i].replace(/^\s*|\s*$/g,"");
					eval('var match = opts[i].match(/^' + this.value + '/i)');
					if(match){
						var len = this.value.length;
						this.value = opts[i];
						setSelectionRange(this,len,this.value.length);
						return true;
					}
				}
			}
		}
	}
}

/* Helper functions (from http://www.faqts.com/knowledge_base/view.phtml/aid/13562 )
--------------------------------------------------------------------*/
function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}
function setCaretToEnd (input) {
  setSelectionRange(input, input.value.length, input.value.length);
}
function setCaretToBegin (input) {
  setSelectionRange(input, 0, 0);
}
function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}
function selectString (input, string) {
  var match = new RegExp(string, "i").exec(input.value);
  if (match) {
    setSelectionRange (input, match.index, match.index + match
[0].length);
  }
}
function replaceSelection (input, replaceString) {
  if (input.setSelectionRange) {
    var selectionStart = input.selectionStart;
    var selectionEnd = input.selectionEnd;
    input.value = input.value.substring(0, selectionStart)
                  + replaceString
                  + input.value.substring(selectionEnd);
    if (selectionStart != selectionEnd) // has there been a selection
      setSelectionRange(input, selectionStart, selectionStart + 
replaceString.length);
    else // set caret
      setCaretToPos(input, selectionStart + replaceString.length);
  }
  else if (document.selection) {
    var range = document.selection.createRange();
    if (range.parentElement() == input) {
      var isCollapsed = range.text == '';
      range.text = replaceString;
      if (!isCollapsed)  { // there has been a selection
        //it appears range.select() should select the newly 
        //inserted text but that fails with IE
        range.moveStart('character', -replaceString.length);
        range.select();
      }
    }
  }
}

/* Autoloader
--------------------------------------------------------------------*/

addEvent(window,'load','autoComplete');
/* STOP EDITING */ 
function addEvent(obj,evt,fnc){ 
/* works with ie5+ and gecko, ie suffers from the 'this' reference missing, a well known issue */
	if(obj.addEventListener){ 
		/* gecko */ 
		obj.addEventListener(evt,eval(fnc),false);
	}else if(obj.attachEvent){ 
		/* ie */ 
		obj.attachEvent('on'+evt,eval(fnc));
	}
}

Kieran Huggins

Kieran.ca

Recent Photos:

Currently Playing:

autoComplete

Example

Example Source

File Source