Make Life Easy With Autocomplete Textboxes

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "Make Life Easy With Autocomplete Textboxes"

[Kester]

There is a closing bracket missing here at the end:

default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);

[Jamie]

An interesting use of Javascript to make life easier for the user. However, I don't understand where the values in the array come from. Please explain. Also, a working example would be beneficial. Thanks.

[carlos]

I don't know if it matters, but you can make this auto-complete function case-insensitive by making the string in the area lowercase (or upper) and the sText. For example: arrValues[i].toLowerCase().indexOf(sText.toLowerCase())

[Plebian]

Jamie suggested a working example would be beneficial - there seems to be one at the author's own homepage: http://www.nczonline.net/

If you go to the downloads section there is a Zip file with the example used in this article.

[matt]

add an extra ) on the end of line 86

charCode);

becomes

charCode));

:)

[paonethestar]

That was a nice one. Good work.

[Emilio]

For Case!

function autocompleteMatch (sText, arrValues) {

for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText.toLowerCase()) == 0) {
return arrValues[i].replace(sText.toLowerCase(), sText);
}
}

return null;

}

[John]

IMHO, in IE, this code will not work if the text box is imbedded in a form. event.keyCode returns "undefined." In IE, you can use window.event.keyCode in the autocomplete function to get the code. (In the example, the text box appears in the page, but no form.) After correcting per Matt's post, the sample code works in Firefox "as is," and works in IE (but not in a form).

[UrbanSoot]

RE: For Case!

Your function caused an error... Here is the working version:

function autocompleteMatch (sText, arrValues) {

for (var i=0; i < arrValues.length; i++) {
lTxt = sText.toLowerCase();
if (arrValues[i].indexOf(lTxt) == 0) {
return arrValues[i];
}
}

return null;

}

[Emilio]

RE: Your function caused an error...

Your function also causes an error, and it is for the same reason mine does. For some reason I did not copy the function over properly. Here is the working version:

function autocompleteMatch (sText, arrValues) {

for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText.toLowerCase()) == 0) {
return arrValues[i].replace(sText.toLowerCase(), sText);
}
}

return null;

}

The previous function returned an error because you need to give the function the index of the array ( arrValues[i].indexOf... ). Your function is also different than mine in that your function replaces the entire input string back to whatever is in the array, while mine keeps what the user has inputted and appends what is in the array.

For example: mine- a user enters R and the function returns Red.
Yours - a user enters R and the function returns red.

Both work so it is just a matter of preference.

[Everah]

I tried all three versions of autocompleteMatch and all three returned an error. Any ideas?

[Max]

There's a missing parenthesis; here's the corrected line, in the autocomplete function:

textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));

Also, my javascript debugger complained on the funny quotes used in the browser detection code...I'd replace with regular double quotes.

Max

[Mad]

you need to use the "i" variable in your loop on the "autocompleteMatch" function :

for (var i=0; i < arrValues.length; i++) {
if (arrValues[i].indexOf(sText.toLowerCase()) == 0) {
return arrValues[i].replace(sText.toLowerCase(), sText);
}
}

[mARTINv]

Brilliant

[alots]

I tested this example and a i gave the mistake:

object is expected when i put some char... in the field...

[Anonymous]

same error for me, object expected

[trancemaster]

by replacing

var isOpera = navigator.userAgent.indexOf(”Opera”) > -1; 
var isIE = navigator.userAgent.indexOf(”MSIE”) > 1 && !isOpera; 
var isMoz = navigator.userAgent.indexOf(”Mozilla/5.”) == 0 && !isOpera;

with

var isOpera = navigator.userAgent.indexOf('Opera') > -1; 
var isIE = navigator.userAgent.indexOf('MSIE') > 1 && !isOpera; 
var isMoz = navigator.userAgent.indexOf('Mozilla/5.') == 0 && !isOpera;

fixes the problem

[rebugger]

textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode);

One missing ) at the end....

[Carlos Eduardo Cruz]

function autocomplete(oTextbox, oEvent, arrValues) {

switch (oEvent.keyCode) {
case 38: //up arrow
case 40: //down arrow
case 37: //left arrow
case 39: //right arrow
case 33: //page up
case 34: //page down
case 36: //home
case 35: //end
case 13: //enter
case 9: //tab
case 27: //esc
case 16: //shift
case 17: //ctrl
case 18: //alt
case 20: //caps lock
case 8: //backspace
case 46: //delete
return true;
break;

default:
textboxReplaceSelect(oTextbox, String.fromCharCode(isIE ? oEvent.keyCode : oEvent.charCode));


var iLen = oTextbox.value.length;

var sMatch = autocompleteMatch(oTextbox.value, arrValues);

if (sMatch != null) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}

return false;
}
}

[Izzy]

To the auhor -

At least make sure your code works before you post it. There were 2 errors in your code I had to fix.

[jnordstrom73]

I know this is an old thread but...

Question: How can I alter this script so that i can type in one field and autocomplete multiple fields? i.e. If i begin typing in the 'Firstname' field can it autocomplete the 'LastName' field.

Or, alternatively, how can I use a <select> on field 1 and have the resulting selection populate the rest of the fields from an array? i.e. Select 'phone' and have the firstname, lastname, etc. fields automatically populated after the selection is made.

[max]

Hello,
I was wondering how one would go about if one wanted to apply the "getDocumentById('textBoxid')and addEventListener" approach instead of using the onkeyPress. Hope you understand what I mean.

I fail every attempt with this great script.

[jac]

What are the two errors? I can't spot them

[asasson]

I have implemented the sript and it works great for me.
The only problem I have is when people enter information for instance: Violete and then delete the last e it the autocomplete will turn off and not add the selected e. ANY THOUGHTS ON HOW TO IMPLEMENT THAT CHANGE?