Hi and thank you for developing the Auto-complete Control
I have a couple of questions about the subject:
1- How can I move to the next control on the page when I press on the tab after I choose somthing from the list or even without choosing any thing?
Since when I text it, it just stay in the textbox !! Is it possbile also to go around this even if we have 2 or more autocomplete contorls
2- How can make the Auto-complete list appear when I put the Auto-complete Control inside a panel for example? When I test it now, the Auto-complete list appear behind the containing Panel... is there away around this?
I had this problem, too. The code in actb_checkkey treats enter and tab the same. However, I think the cases should be separated. A colleague had the bright idea of calling the "actb" function with another (optional) parameter that is the field to tab to, and using that in actb_checkkey. Clearly this would require some mods.
Cool stuff, for the most part. Saved me from having to write the guts of the function. Some other "polish" that would be nice, though:
1. The "tab" character should be treated the same as the "enter" character in auto-complete mode. The following case, if added onto the existing case statement, should do just that (in IE, anyway):
case 9:
evt.keyCode = 13;
actb_penter();
break;
2. When the string in the auto-complete textarea is evaluated, metacharacters are not escaped. This means that "." matches anything (except a newline, of course). That should be dealt with as the full-stop is a common character in email addresses and other strings that could utilise this sort of control.
3. Multiple "deliminators" (the word is actually "delimiter") should be supported. Many programs support a comma or semicolon as valid email address "deliminators". In my particular problem, I need to support metacharacters for "and" and "or", not just one global seperator.
That said, you've done much of the heavy lifting -- and made my current task that much easier. Thanks!
Thanks for your comments. i'll definitely try to include them in the next built. (although point 3 seems kind of tough but i'll try my best nonetheless!)
I'm trying to use this to emulate a combo box. With a popup you get a values. an ID, and Displaying Value.
For example
dropdown for User Names
34 => John Cusak
45 => Harison Ford
23 => Julia Moor
Wouldn't it be nice when user select from an existing option in the list, the associated ID will be set to a hidden id field. If the typed name is does not exist, then 0 or null will be set to the hidden ID field. I will be working on this for an application I'm currently writting, but if anyone has already made some progress, please let me. So I can avoide reinventing the wheel.
When you select the item with mouse. It puts undefine into the text box. I'll try to work on it, but if anyone has already had a solution then please let me know.
I've added multiple autocomplete to the widget, which works in IE5+ and Moz. Other browsers lack the support for DOM2 range traversal or any similar propietary methods.
However in non-supporting browsers it stills allows for multiple elements and the autocompletion of the last one
the code and demo is available at:
http://imaginocreativa.com/slump/autocomplete/index2.html
PS: check the TODO list in the source to see whats comming in the next days
Just integrated the menu and it works great and is very speedy compared to others I'd tried - great work!!
What I'm trying to work out is, is there anyway that when someone is typing in the input box, it doesn't automatically highlight the first word in the autocomplete menu ? Instead, a user has to press the down arrow key to select it.
This would be really helpful, as I would like users to be able to type in the input box and then, if they want to, hit down and use the menu only if they need to.
There are a few functions like actb_godown(), actb_goup(), and actb_penter() which you will have to check if actb_pos is 0. in the case of godown() and goup(), you should prevent the code from reverting the 'original' td element's colour. As for penter(), you will have to stop the script from completing the textbox.
When I put your very nice component near a HTML SELECT (ComboList) the List of the auto complete controle is partially hidden by the HTML Select box ...
I'v not yet find a workaround about this problem, but maybe the solution is explain here : http://www.ozoneasylum.com/8951
This is a known problem with IE. It renders the select boxes on the top of the page elements. Only IFrame objects seem to be rendered over them.
There are two popular solutions to this: 1st is to use an IFrame as the background for the floating element (popup, list, menu...), the 2nd is to dynamically hide all the select boxes when the floated element is being displayed :
---
function hideSelects() {
var selects = document.getElementsByTagName('select');
for (i=0; i
In the microsoft article are you meaning to use an IFRAME or the popup object? Do you have plans to incorporate this into your code? I'm a little unsure about using an iframe in conjuction with your code.
I was evaluating some autocomplete controls and this one was one of the best, so congrats to everyone involved
I've recoded it following an object-oriented approach, so I can have an autocompletion enabled textbox widget in my webapps. I've still to clean up the code quite a lot but I've already shrinked the code quite a few lines and the performance is far better at least in Firefox, plus now it has a propper scroll bar if the number of matches is greater than the specified limit.
It works in IE6, Firefox 1RC and Opera 7.x, I hope it'll work in Safari with a bit of tweaking
Another issue I'll look into is to optimize the current 'string-matching' algorithm by having all the tokens in a huge string (delimited by \n for example) and then we only need to call RegExp once, returning all the matches and storing them in a 'currentMatches' array. I hope it'll be much faster than the current token by token test.
One thing that concerns me is the license in which the code is released. I plan to use this in comercial (profitable) projects and I hope won't be any problems with this, although I prefer to ask first.
I'll ofcourse release the code once it's a bit cleaner and is working with Safari.
After a bit of code tyding I'm at 8.5kb from the 10.2kb of the version I got from a previous post.
I guess another kb can go down by striping the comments.
Opposed to what I thought, using a single string to hold the tokens didn't had a big performance gain. Actually IE is a bit slower using this technique, however the code is much cleaner now, so I'm keeping this method.
I've managed to make it work rock solid on IE5.5, IE6, Firefox 1.0RC and Opera 7.2. IE5 refuses to work due to it's lack of a propper RegEx implementation.
Tomorrow I'll check at work if this runs on Safari and IE:Mac. Once it's working in Safari I'll post a link to download it.
two line change, but it does change your api signature:
function actb_tocomplete(sndr,evt,arr,firstOnly){
actb_firstText = firstOnly;
...
I suppose you could do rename actb_tocomplete to be actb_tocomplete_orig, and add these two functions to preserve your API:
function actb_tocomplete(sndr,evt,arr){
actb_firstText = false;
actb_tocomplete_orig(sndr,evt,arr);
}
function actb_tocomplete_first(sndr,evt,arr){
actb_firstText = true;
actb_tocomplete_orig(sndr,evt,arr);
}
function actb_tocomplete_orig(sndr,evt,arr){
...
In function actb_mouseclick() this.innerText is undefined.
Had to make these changes to get it going:
function actb_mouseclick(){
if (!actb_display) return;
actb_mouse_on_list = 0;
actb_display = 0;
if (undefined != this.innerText) {
actb_curr.value = this.innerText;
} else {
actb_curr.value = striptags(this.innerHTML);
}
actb_removedisp();
}
function striptags(input) {
var chk;
var ret;
chk = input;
ret = input.replace(/<[^>]*>/,"");
while (ret != chk) {
chk = ret;
ret = ret.replace(/<[^>]*>/,"");
}
return ret;
}