Simple auto-complete function
Hmmm. This certainly validates but to the point where it won't even let you put anything in the textField even if the name is in the array...
Here is my .js file
Code:
var aName = new Array(
"John Smith",
"Harry Whodini",
"Dill Doe",
"Robyn Hood",
"Andy Anderson",
"Jimmy Johnson",
"Chris Angel",
"Kevin Mitnick"
);
aName.sort();
function Complete(obj, evt) {
if ((!obj) || (!evt) || (aName.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 < aName.length; i++) {
elm = aName[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);
}
}
function validate(inputField)
{
var input = inputField.value;
for (var i in aName)
{
if (input != aName[i].toString())
{
//Alert the user that they have an invalid input.
//Suggestion: use another DIV element to pop up instead of an
//alert box, a div would actually be more user-friendly.
alert(input.toString() + ' is not a valid input for this field.');
//Resets the focus of the previous text field
inputField.focus();
//Quits the function as soon as the input does not match what is in
//the aName array.
return false;
}
}
return true;
}
And here is my validationTest.asp page with the form and textField:
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="autoComplete.js"></script>
</head>
<body>
<form action="preview.asp" method="get" name="nomineeForm" id="nomineeForm">
<input name="nameOne" type="text" onblur="validate(this)" onkeyup="Complete(this, event)" value="Search Names" size="20" maxlength="50" autocomplete="off" />
</FORM>
</body>
</html>
Even if I type a name correctly (and it's also in the array) I still get allerted.
Simple auto-complete function
Thanks Slaughters.... It works!! I just had to change aMail to aName since I was using aName as the var name...
One question though before It's officially resolved.
On the validator, how can I allow it to accept lowercase versions of the names in the array?
ex:
"John Doe" is the same as "john doe"
I get alerted when I don't use CAPS.
Thanks so much for your help man!
