Auto-selecting options based on continuous keystrokes

One codingforum member once asked in a thread:
"Does anyone know how to allow user to type the first few characters to locate an item in the list box? "

that was the reason I tried creating such a code. And I made it! :)

just thought you might need it in the future :D

here's the latest code:
http://www21.brinkster.com/gver/javascript/multi-stroke_auto-select.htm

you may want to check that thread:
http://codingforums.com/showthread.php?s=&threadid=6244

Seems all too familiar.

Try this (http://www.codingforums.com/showthread.php?s=&threadid=4253)

I like nolachrymose's solution better than my own.

IMHO, my code is still better for the following reasons: :D

1. You can see the characters in the status bar as you type.
2. You can delete the characters by pressing BACKSPACE key which I think is better than DELETE key.
3. You can delete all characters at once by pressing ESC key. This is very useful to provide a way to quickly reset the characters you typed.
4. You can use TAB or ENTER key once the desired item is already selected even if the dropdown is "pulled-down" or not.
5. Remembers previously selected item so that when you type characters to select another item and you happen to change your mind and press ESC or deletes all characters using BACKSPACE, the previously selected item is selected. In other words, the selected item is reset to the previously selected item not necessarily to the first item.
6. Use the codes as is without modifications like putting form and select names
7. No extra field.

i like glen's, except i would have done toLowerCase(). just personal preference. good job glen.

Thanks chrismiceli! :)

I used toUpperCase() because the code returned by onkeydown (as opposed to onkeypress) corresponds to capital letters.

Now if you could abandon the need to use other keys, and just "start over" once something NO LONGER matches anything in the dropdown, it would be perfect. :)

That's the only problem I see with it, when it comes to "internet newbies". I tried to modify the script to do this myself, but I just don't have enough intimate javascript knowledge when it comes to cross-browser compatibility.

P.S. The only reason I say this is because one of my clients wanted a script like this (I think I talked them out of it, I hope), but they couldn't figure out what was going on once they hit the wrong key, and the focus was stuck on the last "correct" option (and the status bar kept accumulating nonsense). And trying to explain to them how to click on the webpage, and reset focus to the dropdown was a nightmare!

... they didn't want explanatory text on the webpage. :rolleyes:

when I created this code, what I had in mind is the Index tab in Help files where you type keywords to search. I tried to imitate its behavior (of course without that extra field) so that end-users wouldn't have a hard time getting used to it. About being stuck on the last "correct" option even when typing the wrong keys, it's just the same behaviour on Index. Maybe you can enlighten your client on this. :)

I don't care about the client at this point, as that's not my job. (I do care about clients and webpage interactivity, etc. but that's not relevant to this particular thread) :)

But actually what you said isn't true, since if I type "N" over and over, in a normal select box, it will always revert to the first "N" in the dropdown (like Nebraska), once all options have been chosen.

And then if they type "A" it will go straight to Alabama.

Assuming this is a State dropdown. You get what I mean? :)

Basically what the client was looking for (not me, as I think it's stupid in the first place), was if someone tried to type in something, it would give them the best selection - but if they made a mistake it would start over without them having to "learn anything new" or read instructions. :p

I know it's stupid... when my account manager asked me to research it I said "uh... are they idiots? Why are they trying to change the way forms work?" ;)

You didn't get what I mean.
What I meant was when you go to Index tab of, let's say, the Help file of IE. When you type the keyword in the textbox and the item is selected in the list, then you typed the wrong keys, the item will remain selected. Well, this is not always the case though :D. Maybe it only happens when you typed the EXACT keywords then you start typing wrong keys, the last correct item will remain selected. That's where I based the behavior of the auto-select option.

I got you, I actually like the way it works, personally.

I just don't think it's close enough to the way that forms are "supposed to work" for people that have never filled out forms before, and have no idea what they are doing (so people that DO know how forms are supposed to work won't get mad when trying to use the dropdown!).

Basically, an idiot-proof version would be cool, that at least emulated returning to "A" if someone made a mistake. LOL!

I am just aiming for perfection, even if it isn't my script... hehe. (and that means idiot proofing) ;)

I think that people who have never filled forms before would not bother to type inside the combo box. I'm sure they would just click and select on the dropdown. So making a perfect idiot-proof version may be useless :D

I agree... I think the client was an idiot for requesting it in the first place. :rolleyes:

But I DO like your solution - if a client ever requests that in the future, I will say "ok, you can do that, but it requires a few lines of instructions in order for people to understand it", and as long as they can READ, it works perfectly! ;)

Thanks. I agree with that too. :)

whammy, if you insist on resetting to 1st item once there is no match, you could easily change the s2() function like this:

function s2(objSelect){
for (var i=0;i<objSelect.options.length;i++){
if (objSelect.options[i].text.toUpperCase().indexOf(typed)==0){
objSelect.selectedIndex = i;
index = i; //remember selected index
return false;
}
}
//no match found, reset selected item to first option
objSelect.selectedIndex = 0;
window.status="";
typed="";
index=0;
return false; //always return false
}


But I still recommend the original behavior, though. :D

i miss the normal behaviour of the up and down arrows in this implementation of the search function. perhaps you can get that functionality programmed in your routine

good catch Roelf!
i'll work on that.
thanks :)

The page (http://www21.brinkster.com/gver/javascript/multi-stroke_auto-select.htm) has now been updated. Thanks to Roelf's comments. :)
If you found further bugs, please let me know and I'll try to fix it.

hmmm, now its all messed up, if you type B, it goes to Brazil, when it shoul go to Belgium, if you type an U next, it goes to United States. if you type an L then it goes to Bulgaria thats correct. if you use the up and down arrow, it skips some entries. Back to the drawing board

huh? what browser are you using? It works for me. I tested it on IE5.5, NS6.2 and Mozilla 1.0

IE 4

hmmm, I haven't tested it with IE4. But did it work before without that up/down arrow bit?

yep

that's odd :confused:
I just added an "else if" for up/down arrow keys. That should not affect the selection when typing inside the combo. But do you see the correct keys in the status bar as you type? I don't have IE4 to check it myself.

Regarding the skipping of selected items when using up/down arrow keys, it's also odd, it works in IE5.5, unless Microsoft changed some behavior from IE4 to IE5+

Thanks anyway.

<edit>
just tested it in IE6 and it also works
</edit>

Originally posted by glenngv
Regarding the skipping of selected items when using up/down arrow keys, it's also odd, it works in IE5.5, unless Microsoft changed some behavior from IE4 to IE5+

Hey, its MicroSoft, what did you expect :D

I can see the correct keys, but with continuous keystrokes, the original functionality of the box is back again -> typeing an B leads to Brazil, typing an U next, leads to United Stated :(

can you do me a favor? :)
can you save a copy in your hard drive then edit the code by commenting the "else if" blocks for up/down keys, then run it offline? Just want to make sure that is the cause of the problem.
Thanks :)

Thats not it, commented out the up/down arrow parts and it still didnt work fine. Maybe its not worth it putting a lot of energy in making it IE4 compatible. I´m at work now, can´t give it much time testing. At home or on my laptop i use IE5.5. It should work fine there. so.....

ok, thanks for the time :)

Hmm, that is exactly what I was looking for. Glenn is the man. Now I won't feel so bad if my client insists on using it (but your name will stay in the credits of course!!!).

P.S. I'm assuming it just doesn't work in IE4 and it defaults to the correct behavior, from the explanation I just heard. That's fine with me. :D

As Roelf noticed, typing inside the combo defaults to default behavior in IE4 but when using up/down arrow keys, he said it skips items. I haven't seen this bug coz I don't have IE4.

I'm just confused why Roelf said that it worked in IE4 before until I added that up/down bit. I didn't modified any part in the auto-select code itself. I only added that up/down block and one line in the ESC block, that's it.

Anyhow, if that doesn't really work with IE4, that's fine with me.

I would have to agree... I know people that use NS4 for some bizarre reason... but I don't think I know anyone personally anyway that uses IE4. :)

me using IE4 at the moment, is just a coïncidence, currntly i am working for a cient which has IE4 still as their default webbrowser. there was no need to upgrade because most of the employees in tihs company dont have internet access, and the intranet is build the way it works in IE4. At home and in my own office IE5.5 is the default

Now that everyone is confused, maybe it's my time to show up!
I don't know anything about cross browser compatibility ( too bad!), but by looking at your code, I just noticed that you're trying to choose the selectedIndex yourself when up/down key is pressed, but why don't you just simply return false/true ( return; ) in those conditions and leave it to browser to determine the right index? I mean:

else if (code==40) { //down arrow
return;
/*
if (document.all){ //IE behaves differently (selectedIndex doesn't change) when select is "pulled-down"
index = ((objSelect.selectedIndex + 1)>objSelect.options.length-1) ? objSelect.options.length-1:objSelect.selectedIndex+1;
objSelect.selectedIndex = index;

}
else {
index=objSelect.selectedIndex+1;
}
typed="";
window.status="";
return false;
*/
}

As you notice I commented your original code and put return instead ( sorry!).
I think it should work.

I couldn't choose my country in your list!

As I said I don't know anything about browser compatibilities, but I can remember that first post that asked for this and I also saw your code in there ( in it's prelimentary form! I still have it, do you want it?! ), so, I made my own version that certainly isn't as complete as yours, but the only difference is that it instaniciates an object for all the selects in the document. It means that you don't have to define a seperate function for all of them.
I don't know if it's right to bring my code in your thread, since you started it yourself and once I saw beetle complaining why someone else wrote his code in his thread ( in this forum of course - i.e. post a javascript), so, I can write it later if you want!

as i said in the comment:

//IE behaves differently (selectedIndex doesn't change) when select is "pulled-down"

"pulled-down" means that the user select's items are pulled-down.
If this is the case, the selectedIndex property is not set while pressing down the arrow key. But if the select is NOT "pulled-down", the selectedIndex is set properly. This only happens in IE (I encountered it using IE5.5) but not in NS6. Test it to see it. :)

I can't do a return at once because Im setting global variables index and typed and also window status.

I just modified the code again. Here are the modifications:

- added a single line of code to accomodate easy additions of as many select elements as you want without modifying ANYTHING in the code. (added another select element in the page to demonstrate this)
- renamed all variables and function names (prefixed by GV_) to avoid possible conflicts with your existing variables and function names.
- added an option to display or not the characters typed in the window's status bar
- added code that degrades well with browsers (such as NS4) that don't support onkeydown event for select element.

See the modified page here (http://www21.brinkster.com/gver/javascript/multi-stroke_auto-select.htm).

P.S.
ConfusedOfLife, I already added your country :D

Thanks for showing your code.
:-)

Hi,

Your code regarding auto-selection options is great.
Thanks for publishing it here.

I am having one probelm though (that didn't have before adding the code), and wil be happy if u help out:

I have "onChange=functionx()" event for the select box (as well as your events), and the functionx works when selecting the value from the select box, but not when pressing the ENETR key when a certain value is highlighted (after typing the first letters of option). When pressing ENTER, the option is selected, but the "onChange" event won't fire.

Before I added your code, it DID work for me.
Do u know the reason for it?

Thanks very much

it's odd that when you hit TAB, the onchange is not cancelled, while hitting ENTER, it is cancelled. Maybe because the TAB key behaves in such away that the focus is taken away from the element, while in ENTER key it is not. So the workaround is to set focus to window or to the next element (Setting blur to the current select element does not make it lose focus :confused: )

change these lines:

else if (GV_code == 9 || GV_code == 13){ //TAB key
GV_typed = "";
window.status = "";
return true;
}

to these:

else if (GV_code == 9){ //TAB key
GV_typed = "";
window.status = "";
return true;
}
else if (GV_code == 13){ //ENTER key
GV_typed = "";
window.status = "";
//set focus to window or to the next element here
//window.focus();
//GV_objSelect.form.elementNameHere.focus();//change italic to appropriate name
return true;
}


or you can make it as a parameter like this:

function GV_detectKey(GV_objSelect,GV_evt, GV_objNextFocus){
...
else if (GV_code == 13){ //ENTER key
GV_typed = "";
window.status = "";
GV_objNextFocus.focus();
return true;
}
...
}

then call the function like this:

<select name="selCountry"
onkeydown="return GV_detectKey(this,event,this.form.selLang)"
onfocus="GV_index=this.selectedIndex" onblur="GV_updateIndex(this,true)"
onclick="GV_updateIndex(this,false)" onchange="...">
...

<select name="selLang"
onkeydown="return GV_detectKey(this,event,window)"
onfocus="GV_index=this.selectedIndex" onblur="GV_updateIndex(this,true)"
onclick="GV_updateIndex(this,false)">

if you want, you can just remove the ENTER key feature by removing the GV_code == 13 in the OR condition in the original code. Anyway, the user can use the TAB key to select currently highlighted item.

Hi Glenn,

You like that GV_ prefix after my post awhile back, don't ya? It's pretty cool when something like that contains an unintentional double meaning. ;)

Hehe. :D

Yeah I like that! :)

Thanks for replying.
The problem was when typing before hitting theses keys, not just by selecting options of course.

Eventually I solved it by checking the tab key alone, and then the enter key:

**************************************
else if (GV_code == 13){ //ENTER key
GV_typed = "";
window.status = "";

functionx(); // "enter" is pressed after typing option

return true;
**************************************

It works great.
U have got another credit on the web. :-)

That was my initial solution, to call the function called on onchange event. But if you put an alert inside that function, you will notice that it is being called TWICE :confused:. Thus, I prefer the "set focus to the next element" solution.

>>it's odd that when you hit TAB, the onchange is not cancelled, while hitting ENTER, it is cancelled.

Well, it behaved the same for both TAB and ENTER key.
And again, the problem happens after typing value (not selecting by arrows).

-----------------------------------------------------------------------

Now. I did add an "alert" to the function and saw what u meant, and it is called twice like u said.

So I guess it won't help me to change focus to the same elemnet, since when using TAB the focus is moved ahead, and yet, the fthe onChange event won't hit. Right?

So I guess I should stick to the the solution of "calling the function called on onchange event" when ENTER or TAB r detected. Right???

****************************************

Another problem u may want to help me solve:

I like the ESC function as u assigned to it, but I'd like
the ESC key tp also return to the original function of it, which is, to "close" the select box, and leave it as it was before typing new things. I mean, not remebering the last selected option, but REMAIN with the last selected option.

I'll explain:
I turned the "return false" to "return true" in the ESC detecting condition, and that is almost serving my need (looks like it).
The only problem with it is that it re-selects the last item again, thus, to me it means that the onChange function works again, and it looks to the user as if the page is refreshed (for I have more than 1 select box), and anyway my functionx is taking time (it calls the asp page again), and it is not good.

What can be done?
I do like the functioning u made for the ESC, but if what I need is only possible without it, I am ready (but not willing) to do witout.

Thanks

>Well, it behaved the same for both TAB and ENTER key.
>And again, the problem happens after typing value (not selecting by arrows).

my test resulted otherwise. Using TAB (after typing), onchange is fired. Im using IE5.5

>I like the ESC function as u assigned to it, but I'd like
the ESC key tp also return to the original function of it, which is, to "close" the select box, and leave it as it was before typing new things. I mean, not remebering the last selected option, but REMAIN with the last selected option.

what do you mean by the last statement?? :confused:
do you mean when you hit ESC, the currently highlighted item is selected and the select box will be "closed"?
My current specification is that when you hit ESC, the previously selected item (before you type inside the select box) is re-selected. I think this is more logical since pressing ESC would mean cancelling what you typed and probably restart typing some other text. If you want the select box to close then you have to focus to the next element.
hope i understood you correctly...

"My current specification is that when you hit ESC, the previously selected item (before you type inside the select box) is re-selected".

I know and it's great. I like to keep it this way.
I WAS talking about pressing ESC, and then pressing the left-click on mouse, if I decide not to select something else all of a sudden.
Sorry I forgot to mention the exact situation.
And in this case the on-change fires (regarding the prev option).
NOW I see that it has nothing to do with ESC key. If I type something in the select box, then regret it, so left-click the mouse in a blank place on page, it hits this onChange event, as if I have just selected the prev option.
What weird is that if I don't type anything, but just "open" the select box, and then left-click (or ESC and then left-click), nothing changes, and all controls in screen stay as they were.
That is what I like to happen when left-click the mouse,
and not re-selecting, thus, firing the onChange event, thus calling the asp page again, thus increases traffic on site, and takes time.
Sorry for confusing u (and me).
And hope I am clear now.

****************************
Another probelm I now see in another page that I
tried to use the code (where TAB and ENTER function the same) , is that when scrolling option with the MOUSE (not clicking), and then hit "TAB", the onChange event is fired all right, but the option is not changed. It still shows the prev option.
Does not happen with ENTER, and anyaway works great with TAB when selecting with the down/up arrows, or when typing.

And u r right, using TAB,does move focus to next element,
But I don't know if it has anything to do with it, since it chnages focus n all other cases (I mentioned) as well, and still works.


Thnaks for replying

I added a timeout to clear the search like windows does.


/**************************************************
Created By:
Glenn G. Vergara
http://www21.brinkster.com/gver/
glenngv@yahoo.com
Philippines

(Keep this intact if you want to use it! Thanks.)
***************************************************/

var GV_typed = ""; //characters typed
var GV_index = 0; //selected index
var GV_prev = 0; //previously selected index
var GV_hasKeydown = false; //flag for browsers not supporting onkeydown event in <select> element
var GV_displayStatus = true;//flag to set window status or not
var myTimeout;


function myFunction(){
GV_typed = "";
window.status = "";
GV_index = GV_prev;
}

function GV_detectKey(GV_objSelect,GV_evt,GV_objNextFocus){

var GV_letter = "";
GV_hasKeydown = true;
var GV_code = (document.all) ? event.keyCode:GV_evt.which;
clearTimeout(myTimeout);
myTimeout = setTimeout("myFunction()", 1000);
if (GV_code == 27){ //ESC key
GV_typed = "";
window.status = "";
GV_index = GV_prev;

it's still not quite clear to me...
let's see if i understand you right.
when you type inside the select box then suddenly change your mind, you press ESC and click somewhere outside the select box. This will select the original option but will fire the onchange event.
is that right? Well, i did just that and it doesn't fire the onchange event.

****************************
>Another probelm I now see in another page that I
tried to use the code (where TAB and ENTER function the same) , is that when scrolling option with the MOUSE (not clicking), and then hit "TAB", the onChange event is fired all right, but the option is not changed. It still shows the prev option.

I didn't get it. When i use the mouse to highlight (not click) the option and hit TAB, it will select the original option and the onchange event is not fired. It's logical that when you hit TAB while the mouse is over an item, that currently highlighted option will not be selected. You have to click it to be selected.

it's better you post a link to your page, maybe there are other things that affect the code.

U understood perfectly the first situation, and I see now that u r right. In another page that I inserted your code, it does not fire the onChange event (when clicking outside the select box after typing something and regreting it), but in the former page it does.
So it must be something with MY code, and has nothing to do with yours.

As for the 2nd issue:
Yes the onChange event is called according to the HIGHLIHTED option, but the option itself won't be selected.

I am truely sorry. I dropped your code just to check the source of the problem and it has, again, NOTHING to do with your code. I still get this problem. Always had and just never noticed. :-)
I put back your code of course.

Sorry for wasting your time, I appreciate your help very much.

My code is in Intranet so I can not link to it.
I'll try to sort it out myself. Bothered you more then enough.

Thanks very much again for your great help and great great code which I have been searching for for ages now.

Avivit

no problem avivit. it's good you brought up this kind of problem. I wouldn't know that my original script would have a problem with onchange event if you didn't experience it. Thanks for that. With regards to your problem, maybe you can attach your code in this thread so I can look into it.

This is good stuff. I thank you.

Having said that, my list contains names (first, last). When I type the "," "1/4" displays in the status bar.

Where would I make the change to catch the comma and not convert it to a fraction?

Thanks

else if (GV_code == 38) { //UP arrow
...
}
else if (GV_code == 188) { //Comma
GV_letter = ",";
}
else GV_letter = String.fromCharCode(GV_code);

you might want to also add code for dots (periods) and single quotes since names can contain such characters. the keycode for dot is 190 and 222 for single quotes

Hi Glenn, that is an excellent script. My client is in asia. What need to be done to make it support non-english language? Say, Chinese, Thai or Korean?

Someone made great changes to my script and I just want to share it with you. As they say, two heads are better than one. :)

You might want to check out who made the changes...
http://codingforums.com/showthread.php?s=&postid=105634

HEY GLENN!

a buddy of mine (far more advanced at scripting than I) likes what this script does (made me smile, thought I should let you know :) etc) but he said he wouldn't use it unless it was more properly self-contained (i.e. no global variables, uses a constructor, basically it'd be a class) - what say we collaborate on making it a complete cross-browser super-easy-to-use class, so this jackass I know will respect my |_337|\|355 (and my vast resources!)

i think the toughest part will be just associating the select element with the class. any pointers?

Oh, yes, it is done.

I've changed the name and almost all of the implementation, documented the API, created a change log with history, and encapsulated the carp out of this thing.

Instantiation is down to one line of code:somevar = new TypeAheadCombo('selectID');where you pass in the select element's ID or the select element itself.

There are two versions that work just like each other, but vary under the hood. This is version 2.0.

This is version 2.2.

Its changes are very subtle, completely unnoticeable upon use. Under the tutelage of many in the JavaScript Programming forum, I gave this a shot: The properties have all been made private, and are accessed via getter and setter methods.

The next version, I think, may stop completely with the prototype and use all nested functions on the constructor; maybe I'll just stop here because that sounds like it would encourage memory leaks, or at least memory overuse.

Anyway, have at it!

FANTASTIC UPDATE

v 2.3a now features (*trumpet blast*) Add-An-Option!

If the type-ahead combo yields no results, it will either create a new option at the top of the select box, or co-opt an already empty leading option.

There may be some glitches left to work out, but I feel that so far it's quite solid in I.E., now to test in Gecko!

Hints? Bugs? Lemme at 'em!

Wow... this is pretty cool stuff... now to add the extra option to a database would be easy using tricky pixels or remote scripting (the former is just an easy way to do some remote scripting). :D

That makes it an Editable Type-Ahead Combobox! :thumbsup:

But it doesn't work for me in IE5.5: 'acceptNewValue' is undefined

Here are my comments when adding new option is on:

1. I didn't quite agree with timed reset of typed characters. If user types very slow, he may end up adding wrong items.

2. When backspace is pressed and there are no matched items, the new item added is not reflected in the list.

That's initially for now. I didn't test it thoroughly.

These are why it's an alpha: 2.3a (unstable alpha) - once it's proven stable it'll be bumped to 2.4a; once it's passed testing it'll be 2.4.

To be proven stable, all bugs must be eliminated. I hold the lack of backspace functionality to be a bug; I'm working on it.

To pass testing, all configurable pieces must be set at acceptable values or settable in a configuration routine.

Whammy, I'm only picturing one new element insertable to the select. Any database issues would be handled by a server-side form processor.

Let me know what else you come up with, folks.

Okay, here's the latest and greatest.

Glenn, based on your input I've done the following:

- The timeout is extended to 2400 ms from 1600 ms if the box is editable.

- The backspace key works, and deletes a letter from the end of the new option.

- Added definition and verification of acceptsNewValue argument. (oops on the definition! I'm maintaining two copies of this: one in three files for development and one in one file for distribution)

Also, I've included an extension on the String object called "fromKeyCode(keyCode, evtType='keydown')" - I needed this to allow punctuation to be used in the options, especially for matching. The script now also doesn't interfere with modifier keys, though the case of the new entry is still controlled programatically as I know of no way to detect caps-lock. Speaking of, what's event.metaKey usually for?

Anybody care to test this biznie on a Mac? How about IE/Win less than 6, or IE/XP?

I've got it working on IE6/win2k and Firebird 0.6.1.

Have at it!

Works great in IE5.5:thumbsup:

I tested it on my MAC. OS 9.2.2, Netscape 7 and IE 5.1.7 and it does not work.

When I type in the combo box in Netscape it goes to the entry that starts with that letter and does not auto complete.

In IE 5.1.7 I go nothing at all.

HTH

MNS

Works like a charm on my win2000-machine at work, I tested these following browsers [results]:
Mozilla 1.4 [OK]
Mozilla Firebird 0.6.1 [OK]
IE 6.0 [OK]
Opera 7.11 [OK]
Netscape 4.7 [failure - unexpected? - I think not]


EDIT: Tested it on another machine:
IE 5.0 [winNT: failure]
IE 5.5 [win2000: OK]



EDIT2: I get a js-errormessage at the statusbar on NS 4.7, but the select-boxes work fine.

In my original version of the script, I had a delay for auto-selecting the item in the combobox for NS6+/Mozilla.
In this new version (OO), this was omitted.


...
...
if (document.all) {
//for IE
return GV_selectItem(GV_objSelect);
}
else{
//for NS6/Mozilla and up (put a little delay to supercede the SELECT behavior of auto-selecting option on press of the first letter of the item)
setTimeout("GV_selectItem(document.forms['"+GV_objSelect.form.name+"'].elements['"+GV_objSelect.name+"'])",1);
}
}

function GV_selectItem(GV_objSelect){
for (var i=0;i<GV_objSelect.options.length;i++){
if (GV_objSelect.options[i].text.toUpperCase().indexOf(GV_typed) == 0){
GV_objSelect.selectedIndex = i;
GV_index = i; //remember selected index
return false;
}
}
GV_objSelect.selectedIndex = GV_index; //re-select previously selected option even if there's no match
return false; //always return false
}

I know it's hard to implement setTimeout in OO. But here's a Timer class for OO timeouts (http://www.codingforums.com/showthread.php?s=&threadid=10531) created by Algorithm. Maybe Choopernickel can look into this.



Netscape 4.7 [failure - unexpected? - I think not]


In my original version, it degrades. I don't know why Choopernickel added the document.layers statement here:


if (typeof anElement == "string") { // try for the ID
anElement = document.getElementById ? document.getElementById(anElement) : document.all ? document.all[anElement] : document.layers ? document.layers[anElement] : anElement;
}

Originally posted by glenngv
In my original version of the script, I had a delay for auto-selecting the item in the combobox for NS6+/Mozilla.
In this new version (OO), this was omitted.

Shame on me - I have an install of mozilla which actually already includes the functionality. I foolishly deleted the timeout, as I was wrapping my constructor calls in IE-specific checks for development.
I've got the delay in there now.

Originally posted by glenngv
I know it's hard to implement setTimeout in OO.
On the contrary; I've just made an internal member of the combo box as a timer storage unit. It's not an OO timer (that's the difficult part); but it's a timer in the object.

Originally posted by glenngv
In my original version, it degrades. I don't know why Choopernickel added the document.layers statement here:
That's just a standard snippet I use to grab an element. I've changed the constructor function to return if document.layers is available; I don't want to cause errors in netscape 4, but I don't care if it works. I'd rather it degrade seamlessly and invisibly.


I'll post the latest later, when I fix a bug that popped up.

Latest.

expected ')' on line 245.
you missed the + operator


this.delayedSelect = function () {
selector = setTimeout("document.forms['"+self.element.form.name+"'].elements['"+self.element.name+"'].selectItem()", 10);
}


But even if it's corrected, the delay doesn't work. :(
As you can see, the setTimeout function will execute this statement:

document.forms.comboForm.elements.combobox2.selectItem()

selectItem() method is obviously not part of the combobox object.

Since setTimeout evaluates statements in global scope, what you should execute in the setTimeout is:

setTimeout("supercombo_1.selectItem()")

where supercombo_1 is the global variable that is an instance of the TypeAheadCombo constructor.

But you won't know what instance to execute.
I told you, it's difficult to implement OO timeouts.
Here's the thread (http://www.codingforums.com/showthread.php?s=&threadid=10081) that pushed Algorithm to make his OO timeout script.

Stinkin' version controlling got me on that one.

Glenn: It's really not that hard. Like I said, making the timer an internal member of the instance really helps. The other half is the element/instance association, which happens in the constructor like this:
this.element = anElement;
this.element.combo = this;

Now, given the element, I can get to the combo (and its methods, including selectItem() ); given the combo, I can manipulate the element.

This error was as simple as forgetting an association keyword.

Change the offending method to read

this.delayedSelect = function () {
selector = setTimeout("document.forms['"+this.element.form.name+"'].elements['"+this.element.name+"'].combo.selectItem();", 10);
}

Methinks it's time to mark it 2.4b.

perfect!!! :thumbsup:

I have one comment though.
This is just my opinion....:)

I still don't agree on setting timed reset of typed chars or automatic reset at all. The user must have absolute freedom on how long he can type inside the combo. The typed chars should be manually reset by letting the user press ESC, TAB or DELETE keys or clicking outside the combo. And that was the behavior of the original version.

What are your thoughts on this?

Well, it couldn't hurt to pop a resetter flag into the constructor.

What if there were a way to parse named arguments passed in as one string, like in the window.open() method?

new TypeAheadCombo(elementID,'reset=boolean|milliseconds,acceptNew=boolean,allowPunctuation=boolean,etc= type);


Has anyone put together anything to handle something like this?

Reversioning as 2.4b - 2.4 full may include new arguments. Attached is text file, all in one, like prior; next will be multi-file zip.

Multi-file zip:

combobox.html
String.js
TypeAheadCombo.js

I sure hope you folks are using this as much as I am. Any features you'd like to see? Anything need changing? Should I start a sourceforge project on this puppy?

Anyhoo, this update allows for DOM2-style events (I'm using the dom2_events library from dithered.com in one project, and this was incompatible), and has a couple minor general maintenance fixes.

I've left off the named parameters for a later date; I may make a setup() method which would be called instead of the constructor; should I just use named arguments in the constructor? What are your thoughts?

This post has the demo file; the next will contain the multi-file archive.

Edit: found a bug or two regarding "new item" addition/removal... here's the fix.

Multi-file zip:

combobox.html
String.js
TypeAheadCombo.js

edit: above fix now also here

Hi,

This is a great bit of coding but it doesn't want to work with IE5.

Can it be made to degrade gracefully with <IE5.5 browsers?

Currently gives a jscript error "Object doesn't support this property or method".

Cheers!

What line?

Sorry for the delay in getting back, thanks for the reply.

Running the example combobox.html on IE5 gives a jscript error,

Line: 12
Char: 3
Error: Object doesn't support this property or method
Code: 0

Paste this code into the file, above the definition of String.fromKeyCode :

if (typeof(String.fromCharCode) == 'undefined') {
String.fromCharCode = function () {
if (arguments.length = 0) {
return "";
}
var charCodeChars = new Array(32);
charCodeChars[9] = '\t';
charCodeChars[13] = '\n';
charCodeChars.push(' ','!','"','#','$','%','',"'",'(',')','*','+',',','-','.','/','0','1','2','3','4','5','6','7','8','9',':',';','<','=','>','?','@');
charCodeChars.push('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T',' U','V','W','X','Y','Z','[','\\\',']','^','_','`');
charCodeChars.push('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t',' u','v','w','x','y','z','{','|','}','~');
}
}

edit: damn forum software. Each line which begins charCodeChars.push( should continue as one line until you reach the ); there.

I know there's a way to get around the warping in 'java script:', but is there a way to get around that line-breakage?

Yes, you have to use trial-and-error escaping of characters in the string - when you find a particular combination removes a linebreak, it may well cause another somewhere else, but it will remove any linebreaks caused by exactly that combination that you're using. You could also insert some vB codes, they tend to help as well.

Still gives me the error in IE5.

I've got...




if (typeof(String.fromCharCode) == 'undefined') {
String.fromCharCode = function () {
if (arguments.length = 0) {
return "";
}
var charCodeChars = new Array(32);
charCodeChars[9] = '\t';
charCodeChars[13] = '\n';
charCodeChars.push(' ','!','"','#','$','%','',"'",'(',')','*','+',',','-','.','/','0','1','2','3','4','5','6','7','8','9',':',';','<','=','>','?','@');
charCodeChars. push('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X' ,'Y','Z','[','\\',']','^','_','`');
charCodeChars. push('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x' ,'y','z','{','|','}','~');
}
}

String.fromKeyCode = function(keyCode,evtType) {
if (!evtType || !evtType.length)
evtType = "keyDown";
else if (evtType.toLowerCase() == "keypress")
return String.fromCharCode(keyCode);
var keyDownChars = new Array(16);
keyDownChars[8] = '[Bksp]';
keyDownChars[9] = '[Tab]';
keyDownChars[12] = '[N5+shift]';
keyDownChars[13] = '[Enter]';
keyDownChars.push('[Shift]','[Ctrl]','[Alt]','[Pause]','[CapsLock]');
for (i=11;i;--i) keyDownChars.push('undefined');
keyDownChars[27] = '[Esc]';
keyDownChars.push(' ','[PgUp]','[PgDn]','[End]','[Home]','[Left]','[Up]','[Right]','[Down]');
for (i=7;i;--i) keyDownChars.push('undefined');
keyDownChars[45] = '[Ins]';
keyDownChars[46] = '[Del]';
keyDownChars.push(['0',')'],['1','!'],['2','@'],['3','#'],['4','$'],['5','%'],['6','^'],['7','&'],['8','*'],['9','(']);
for (i=7;i;--i) keyDownChars.push('undefined');
keyDownChars.push('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U ','V','W','X','Y','Z','[WinKey]');
for (i=4;i;--i) keyDownChars.push('undefined');
keyDownChars.push('0','1','2','3','4','5','6','7','8','9','*','+','undefined','-','.','/','[F1]','[F2]','[F3]','[F4]','[F5]','[F6]','[F7]','[F8]','[F9]','[F10]','[F11]','[F12]');
for (i=62;i;--i) keyDownChars.push('undefined');
keyDownChars[144] = '[NumLock]';
keyDownChars[145] = '[ScrollLock]';
keyDownChars.push([';',':'],['=','+'],[',','<'],['-','_'],['.','>'],['/','?'],['`','~']);
for (i=26;i;--i) keyDownChars.push('undefined');
keyDownChars.push(['[','{'],['\\','|'],[']','}'],["'",'"']);
return keyDownChars[keyCode];
}







...but formatted without the line breaks :)

Gives the same error as before but offset by the new code, line 27 now I think.

Have I missed something...?

Thanks.

Whoops! I forgot to build the return string. Replace the new code with this:

if (typeof(String.fromCharCode) == 'undefined') {
String.fromCharCode = function () {
if (arguments.length = 0) {
return "";
}
var charCodeChars = new Array(32),
returnString = "",
j;
charCodeChars[9] = '\t';
charCodeChars[13] = '\n';
charCodeChars.push(' ','!','"','#','$','%','',"'",'(',')','*','+',',','-','.','/','0','1','2','3','4','5','6','7','8','9',':',';','<','=','>','?','@');
charCodeChars.push('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T',' U','V','W','X','Y','Z','[','\\\',']','^','_','`');
charCodeChars.push('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t',' u','v','w','x','y','z','{','|','}','~');
for (j=0;arguments.length>j;j++) {
returnString += charCodeChars[arguments[j]];
}
return returnString;
}
}

...and let me know where that gets you.

edit: have to double-escape the backslash in the post; don't forget to fix the line-breakage. also: don't use i for an array iterator when you're using italics vB tags later! :D

Thanks. I'll check it out when I'm in next.

I believe Array.push() is not supported in IE5. You have to prototype (http://www.codingforums.com/showthread.php?s=&threadid=19996) that method.

That was indeed my next thought, glenn. I'll work on getting the whole deal integrated (including an Array.js file for any unsupported array methods), but until then, here's a copy with the push() method prototyped.

Sorry for the delay in getting back.

All works well now in IE5. Excellent bit of coding there.


Cheers!

Great work Guys! :thumbsup:

This script looks to be exactly what I need, but it doesn't seem to work exactly as described. Has it been tested under Firefox? The issues I'm running into are as follows:

1) No display of what is being typed in the status bar
2) Entering non-existing entries doesn't seem to work
3) Getting 'DOM2Event is not defined' errors, although it doesn't seem to be fatal.
4) Hitting backspace more times then the typed buffer causes the browser to go back to the previous page since backspace is a shortcut for back.


Are there work arounds for these issues?

...Izzy

---
Another thing... I have to agree with Glenngv re the timeout feature. At the very least, it seems way to quick. Having a way to turn this feature off or change the timeout value as Choopernickel suggested makes a lot of sense. Was any work done in this regard?

I haven't look into too much details but here are my thoughts:

1) Firefox has a default setting to NOT allow script to change status bar text (in Tools > Option > Web Features > [Advanced...] > Advanced Javascript Options).

2) Haven't look into this.

3) Try changing this: (and other similar codes)

TypeAheadCombo.prototype.elementFocus = function (evt) {
var theCombo;
if (evt && window.addEventListener) {
if (DOM2Event) {
var e = new DOM2Event(evt, window.event, this);
}
theCombo = e.target.combo;
}
...
}

to:

TypeAheadCombo.prototype.elementFocus = function (evt) {
var theCombo;
if (evt && window.addEventListener) {
if (typeof DOM2Event != "undefined") {
evt = new DOM2Event(evt, window.event, this);
}
theCombo = evt.target.combo;
}
...
}

4) Haven't look into this.

Thanks Glenn,

I haven't tried the code change yet, but it looks right. I have changed the option for allowing javascript to change the status bar, but it doesn't seem to have fixed the problem.

I tried looking into the timeout issue, but my javascript knowledge is limited and I'm still trying to figure out exactly what makes it tick. (sorry for the pun :) I tried simply increasing the timeout values from 1600 and 2400 to 36000, but it doesn't seem to make a difference. I'm thinking the bug is elsewhere. If I understand correctly, these timeouts are in milliseconds, so this should be 16 and 24 seconds respectfully, but I doubt I'm seeing more then 1 or 2 seconds before a timeout. It'd be nice to just disable the feature. I'll take another look at it tomorrow and see if I can figure out how to do that.

The more critical problem for my current needs is regaining the ability to add new entries. I have to say I've learned a lot about javascript by stuying this code. With any luck, I'll figure this one out yet tonight...

Thanks again for getting back to me so quickly and for your work on this script in the first place :)

...Izzy

Looks like the code isn't running at all in firefox. The behaviour that I thought was the script looks to be built into firefox. It seems to do everything this script does, except the ability to add new entries, and the timeout seems really short. :(

That explains why my efforts to troubleshoot haven't responded as expected. I'm going to dig some more to see what the problem is.

...Izzy

I'm happy to say I finally have this script working.

Turned out to be a combination of problems, mostly in the perl script I was generating the page with. I wasn't calling the pageInit() script correctly and I neglected to give the form a name. The only real problems with this script were with the DOM2 calls. The solution Glenn suggested solves them.

I suggest the addition of something like this to help troubleshoot problems relating to forgetting to name your form.


if (this.element.form.name.length == 0 ) {
alert("The Form doesn't have a name.");
}


I added it to the constructor below the following lines:


// ASSOCIATION
this.element = anElement;


My Javascript skills are limited, so there may be a better way to do this.

Thanks again for the help Glenn. And thanks guys for the great script! ;)

...Izzy

Glad you sorted it out yourself. :thumbsup:

yeah, it was easy once I realized I wasn't actually running the script at all when I thought I was. After that, the real errors started showing up. :)

...Izzy

Thank you for a very usefull application.
The only problem that I have incountered is that once you are in the combobox and type to get to a location in the list, The arrow keys do not seem to work. I am using Combobox 2.5b and have not found a newer version.

Also I modified the script so that you do not need to know how many comboboxs there are so that it is generic. The change is

function pageInit() {
var i;
for (i=0;i<document[0].elements.length;i++) {
if (document[0].elements[i].id.substring(0, 8) == "combobox"){
supercombo = new TypeAheadCombo (document[0].elements[i].id);
};
};
}

Thank you for any assistance you mab provide.
Paul :thumbsup:

What browser are you using?

Regarding the change in pageInit...
Generally, you should have separate variables for new instances of a constructor. But in the case of this script, it seems to be fine (though not still recommended) to have one variable (as you did) for all instances of TypeAheadCombo, because the instance variable is never used again anywhere in the page.

I agree about the separate variables but like you said it is never referenced again and saw it as an easier code as well as using less resources.
I am using Ie6 Sp1 with all hotfixes.

oooppppssss

I agree about the separate variables but like you said it is never referenced again and saw it as an easier code as well as using less resources.
I am using Ie6 Sp1 with all hotfixes.
It works for me in IE6 SP1. Maybe other codes are somehow interfering the script? Can you post your code?

Hello!!

I have to tell you Glenn that your combox have saved me! i was looking for over a year on the internet for such a component and i had to build and applet for that page and now i want to replace it with this! the applet it to much heavy!

My question is how can i set a value direct to the combox when loading record from db when the value is not between the options i have in the combox.


10x ahead,
Netanel

My question is how can i set a value direct to the combox when loading record from db when the value is not between the options i have in the combox.

What do you exactly mean? I didn't quite get it.

BTW, thanks for liking the script. :thumbsup:

Hello!

Thank you for your attention.
I'm using ur combox in my pages using the option to type a value that is not between the given options of the specific combox. I'm saving the data to db and then i want to reload it from the db to my page.
My problem is that i cannot see in the combox the value was reloaded from db because it's not between the given options so i want to use a function or an attribute in the combox to attached the value from db so it will show up in the combox after reloading data.

I'm using the version that eric have put with the two js files.

10x ahead,
Netanel

Only the selected option item is sent to the server, so if the user types new option item but selects other item, the server wouldn't know what option item was added by user. So you must store the added items in a hidden field so that when the form is submitted, the server can retrieve that from the request and store in the database.

But do you just allow the user to type anything and save it in the database without verifying the validity of the input?

In Some fields it's an open combox without validation because it can be a a temproary company that does not exist in our database and will appear only in the bill.

i added to the script a public method that called setValue with the value from db and then called MakeNewValue... so it works for me.

I just haite the ugly writing of JSP i so wanted to use JSF or Structs if they add a editable combox ... it's so ugly with out MVC.



to much code ...

Hi, I've tried the combo box with very large number of options it was a disaster....
it runs over all the options online and it took a few good seconds to find the choice i wanted ...

i've seen a code of it using HTC components but i don't know how to adjust it to my needs... (make all key pressed capital letters and the option if to allow input not from the exist options already in the combo box...)
if someone will be able to help me i will very appreciate it...

Here is the link i've found with the HTC component:
http://www.deadbeef.com/dhtml/combobox.htm

10x ahead,
netanel

I'm using IE 6.0 SP1 and having a problem with the arrow keys. You can see this problem on your sample page (http://www21.brinkster.com/gver/js/multi-stroke_auto-select_combo.htm).

Once the drop lists are down, the arrows work fine. But if you are in a drop list field (without the list being displayed) you cannot arrow through the various options like you do on a select box.

1. Go to the 3th box on your sample page.
2. Select "chardonnay"
3. Tab to the 4th box.
4. " " is the selected item.
5. Press the down arrow key once and you see "Chardonnay".
6. Press the down arrow key again and you cannot get beyond Chardonnay.
7. Press the up arrow key and you get back to " ".

This box is exactly what I need thanks.

Looking forward to the fix...

Hello,


I have some suggesstions for improvemens.
1. see the typed letters in the combox in the first empty options list.
2. the search in the options list will be taken invisible from the the user eyes.
3. maybe to use binary search...
4. an option to see in the combox an option that is not in the constant list for about submitting of the form
5. background the optionally completion and put the cursor before it.
6. the option to type a shorter word that is a start of a word that is already in the options of the combox.(currently, if there is the options "TEST", you cannot write TE as typed option without choose the "TEST"...

10x ahead,
Netanel

I'm using IE 6.0 SP1 and having a problem with the arrow keys. You can see this problem on your sample page (http://www21.brinkster.com/gver/js/multi-stroke_auto-select_combo.htm).

Once the drop lists are down, the arrows work fine. But if you are in a drop list field (without the list being displayed) you cannot arrow through the various options like you do on a select box.

1. Go to the 3th box on your sample page.
2. Select "chardonnay"
3. Tab to the 4th box.
4. " " is the selected item.
5. Press the down arrow key once and you see "Chardonnay".
6. Press the down arrow key again and you cannot get beyond Chardonnay.
7. Press the up arrow key and you get back to " ".

This box is exactly what I need thanks.

Looking forward to the fix...
Try commenting out this line from the reset function:

theCombo.element.selectedIndex = theCombo.getIndex();

I was not the one who implemented the major changes in this script. So I don't know at the moment what's the side effect of removing that line.

Hello,


I have some suggesstions for improvemens.
1. see the typed letters in the combox in the first empty options list.
2. the search in the options list will be taken invisible from the the user eyes.
3. maybe to use binary search...
4. an option to see in the combox an option that is not in the constant list for about submitting of the form
5. background the optionally completion and put the cursor before it.
6. the option to type a shorter word that is a start of a word that is already in the options of the combox.(currently, if there is the options "TEST", you cannot write TE as typed option without choose the "TEST"...

10x ahead,
Netanel
Thanks for the suggestions! :)
I will look into that but not at the moment as I'm quite busy right now.

it doesn't work!
Are you referring to the temporary fix I suggested in post#106 or what? :confused:

I am using the autocomplete select box (which I absolutely love, thanks for the great work) coupled with a select list jump to function. I am having a problem that I am sure is probably faulty HTML, but was wondering if someone could help. I know the autocomplete box by itself works fine because I use it on other pages in the site. But when I try to use it to send a value to a jumpto() JS function, I get an error that document.forms..elements is not an object. I am calling it like this...

<select name="edit_driver" id="edit_driver" onChange="openDriver(this)">
<option value="None">Enter the first few letters of the last name</option>
<option value="1">Alname, Afname</option>
<option value="2">Blname, Bfname</option>
<option value="3">Clname, Cfname</option>
<option value="4">Dlname, Dfname</option>
<option value="5">Elname, Efname</option>
<option value="6">Flname, Ffname</option>
</select>
The javascript function that the select value is going to is...

function openDriver(driverId)
{
if (driverId != "None")
{
self.location.href = "edit_page.php?id=" + driverId.options[driverId.selectedIndex].value;
}
return true;
}

Any ideas what I can differently to get the autocomplete box to pass the data to the other function?

As a side note, when you use the mouse to click it the drop down works fine.

Does your form have a name? Someone also posted in this thread that had a problem and later found out that he forgot to name the form.

BTW, you have to change the openDriver function to this:
function openDriver(driverId)
{
var id = driverId.options[driverId.selectedIndex].value;
if (id != "None")
{
self.location.href = "edit_page.php?id=" + id;
}
}You may want also to change the driverId parameter to something more descriptive like oDriver or objDriver.

SWEET!!! I named the form, changed the JS function and everything is humming right along. Thank you sooo much.

Is there a maximum amount of combo boxes allowed? I noticed the download example used:

id=\"combobox1\"
id=\"combobox2\"
id=\"combobox3\"

for the different combo boxes. And my first 3 combo boxes work just fine, but doing:

id=\"combobox4\"
id=\"combobox5\"
id=\"combobox6\"

for the next three don't work. Any ideas? Cheers!

Nevermind :thumbsup: Got it.

How about this one though:

I have a combo box with the following names

Mahesh S (Team 1)
Mahesh T (Team 2)
Mahesh V (Team 2)

Typing in Mahesh and then using the down arrow key to find the next Mahesh's as the user I am unsure of the last names, and select Mahesh V, the third selection. When I tab to the next field, that field jumps back to the first occurance of Mahesh and sticks as Mahesh S.

Any suggestions how I can get around this, without using my mouse to click and select? Thanks!

What browser are you using? Can you post the link to the page? I tried what you did in IE6 and Firefox and it works as expected.

I am using Maxthon. I just tried in Firefox and it worked. I'll also try IE 6 and see how it goes. I won't bother you and assume it is something in Maxthon. Thank you for the quick reply!

Oh, new browser. I heard it only now. Is it an IE-based browser? Searching the web, I found out that it was previously known as MyIE2.

Hi Glenn,

First of all, this is some awesome code.

However, there are a couple of things that I can't get to work:

1. If you click on the listbox (so that the items are "open"), then type a few letters in, and then tab off to the next element, the item that I choose doesn't "stick", it goes back to the original item.

2. Using the up and down keys to move through the items while the listbox isn't "open" doesn't work, in other words, if you tab into the listbox and try to use the up and down keys, it doesn't work.

Do you know how I can fix these two issues?

Thanks!

First of all great script. I'm having a small issue. When I use the '/' key on my keypad it doesn't show up. Can you please help me. Thank you in advance.

Try this function:

add:
onkeydown='return doSelect()'
to select tags.

add javascript after select code.

<SCRIPT LANGUAGE="JavaScript">
var TYPED="";
var LAST_TYPED=0;
var NOT_FOUND_IN = false;
var OPT_NEW;
var WAIT_RESTART = 1250;
/** When user types key on select, the keys are remembered and used
to try and look for a matching item in the list */
function doSmartSelect()
{
var list = event.srcElement;
var d2 = new Date();
NEXT_TYPED=d2.getTime();
if ((LAST_TYPED!=0) &&
(NEXT_TYPED >(LAST_TYPED + WAIT_RESTART)))
{
clearTyped(list);
}
var d1 = new Date();
LAST_TYPED = d1.getTime();
var ieKey;
var e = event;
ieKey=event.keyCode;
// IF UP KEY IS PRESSED SCROLL
if(ieKey == 38)
{
scrollUp(list);
return false;
}
// IF DOWN KEY IS PRESSED SCROLL
else if(ieKey == 40)
{
scrollDown(list);
return false;
}
var next=String.fromCharCode(ieKey);
// add key to list
TYPED+=next;
// search for match and select if we find one
findMatch(list);
return false;
}
/** scroll up through the list*/
function scrollUp(list_p)
{
var length = list_p.length;
var i = list_p.selectedIndex;
if(i == 0)
{
list_p.selectedIndex = length - 1;
return false;
}
else
{
list_p.selectedIndex = i - 1;
return false;
}
}
/** scroll down through the list*/
function scrollDown(list_p)
{
var length = list_p.length;
var i = list_p.selectedIndex;
if(i == length-1)
{
list_p.selectedIndex = 0;
return false;
}
else
{
list_p.selectedIndex = i + 1;
return false;
}
}
/** Searches the select list to find a match*/
function findMatch(list_p)
{
var found=-1; /* -1 means not found */
var i;
if(NOT_FOUND_IN)
{
i = 1;
}
else
{
i = 0;
}
for(i;found==-1&&i<list_p.length;i++)
{
var _str=list_p[i].text.toUpperCase();
// if list item starts with what we typed then we found match!
if(_str.indexOf(TYPED.toUpperCase())== 0) {
found=i;
}
}
// if we found a match then select it else clear what was typed
if(found!=-1)
{
list_p.selectedIndex=found;
} else {
clearTyped(list_p);
}
}
/** Resets what the user was typing and alerts to that fact*/
function clearTyped(list_p)
{

if(!NOT_FOUND_IN)
{
insertAlert(list_p);
NOT_FOUND_IN = true;
return false;
}
list_p.selectedIndex=0;
TYPED="";
}
/** Dummy call to override the autoselect feature in IE*/
function doSelect() {
doSmartSelect();
return false;
}
/** Inserts a Not Found message at the start of the dropdown*/
function insertAlert(list_p)
{
var sel = list_p;
OPT_NEW = document.createElement('option');
OPT_NEW.text = 'Not Found';
OPT_NEW.value = '-1';
sel.add(OPT_NEW, 0);
list_p.selectedIndex=0;
TYPED="";
}
</script>

What I would like to do is highlight the predicted part of the selection as the user types.

I've tried this code and I put it with my javascript functions...
the problem is if there is a form that does not have the combobox then it gives a javascript error when loading.

any way to avoid this?

Would it be possible for you to post the completed combo box as an HTML file to download?

Would it be possible for you to post the completed combo box as an HTML file to download?


yea.. is this possible? oh .. also..

is it also possible to use this with Characters AND Numbers.. ?

Data sample:

00123D821DAA
001FFD82J8PAA
001298821DAA
00123PAQ187A

Thanks Glenn and other Sr Gurus who made Typeahead Combo to work.

But this combo code is disabling my Menu. Pls help me out.
I am attaching my menu code here.

Thanks,
Srikanth

Here is my Top menu attachment in txt format.