The JavaScript Source: Forms : Auto Complete Function

General

Create an auto-complete or auto-suggest text box in JavaScript, without use of prototype handlers and other advanced techniques. This script could be adapted for use in a number of different situations.

Notes

Created by: Ilanio
Web Site: WebDeveloper.com Forums
Posted: September 6, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: autoCompleteFunction.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Ilanio | http://www.webdeveloper.com/forum/showthread.php?t=119753 */
var aMail = new Array("albert@mail.com","steve@mail.com","beth@mail.com","harry@mail.com","barry@mail.com", "allen@mail.com", "susan@mail.com", "hal@mail.com");
aMail.sort();

function Complete(obj, evt) {
	 if ((!obj) || (!evt) || (aMail.length == 0)) {
 	 	return;
  }

  if (obj.value.length == 0) {
  		return;
  }

  var elm = (obj.setSelectionRange) ? evt.which : evt.keyCode;

  if ((elm < 32) || (elm >= 33 && elm <= 46) || (elm >= 112 && elm <= 123)) {
  		return;
  }

  var txt = obj.value.replace(/;/gi, ",");
  elm = txt.split(",");
  txt = elm.pop();
  txt = txt.replace(/^\s*/, "");

  if (txt.length == 0) {
  		return;
  }

  if (obj.createTextRange) {
   	var rng = document.selection.createRange();
  		if (rng.parentElement() == obj) {
   			elm = rng.text;
  	 		var ini = obj.value.lastIndexOf(elm);
  		}
  } else if (obj.setSelectionRange) {
  		var ini = obj.selectionStart;
  }

  for (var i = 0; i < aMail.length; i++) {
   	elm = aMail[i].toString();
  		if (elm.toLowerCase().indexOf(txt.toLowerCase()) == 0) {
   			obj.value += elm.substring(txt.length, elm.length);
  	 		break;
  		}
  }

  if (obj.createTextRange) {
  		rng = obj.createTextRange();
  		rng.moveStart("character", ini);
  		rng.moveEnd("character", obj.value.length);
  		rng.select();
  } else if (obj.setSelectionRange) {
  		obj.setSelectionRange(ini, obj.value.length);
  }
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="autoCompleteFunction.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form name="anyForm" style="text-align: center;">
  <small>(Begin entering one of the names below)<br>
  <em>Albert, Allen, Barry, Beth, Hal, Harry, Steve, Susan</em></small><br><br>
  <strong>Send e-mail to:</strong>
  <input type="text" name="anyName" onKeyUp="Complete(this, event)">
</form>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: bart bosma
very neat
07/31/2008 23:08:23

1. From: Rick Wannall
Perfect!
12/28/2007 08:11:26

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: bart bosmavery neat07/31/2008 23:08:23

1. From: Rick WannallPerfect!12/28/2007 08:11:26

2. From: bart bosma
very neat
07/31/2008 23:08:23

1. From: Rick Wannall
Perfect!
12/28/2007 08:11:26