Very nice article indeed. I've used it in a project, which faced all drawbacks listed here (memory leaks, control width, etc.) I've fixed all these + my script is perfectly formatted (= readable) + runs without a single error on every mainstream browser (FireFox, Opera, Safari, MS IE).
(the only drawback is that doesn't have a client-side array ("customarray") to populate the control, it uses AJAX; this ability can be returned, however)
Author, can you please respond? Should I send a new script to you (so you can update your article) or can I write a new one?
Listen up! Teamwork means staying out of my way! (Seifer, Final Fantasy 8).
okay, i figured it out.
the addEvent methods should be removed and replaced by inline xxxx.onblur=...
this caused the huge memory leaking
the common.js should also be removed
i reduced the object to only "actb.js"
in html something like this should be entered:
i used arrays of more than 10000 items => VERY VERY FAST results!
i also tuned the lay-out to obtain some kind of default input text box:
* dynamic borderstyle
* selection color & background if the item is selected
* up & down arrows like ↓ and &uparr;
* capturing TAB key: same as if pressed 'enter'
* also allow "shift+TAB" to return to previous control
* focusing textbox and pressing up or down shows the list starting with 1st item
* after leaving the control force the original events "onchange" & "onblur"
haha, anyone interested??? Zichun??? Dmitry???
I need to perform autocomplete with on mouse over it has to display details.
ex: I am displaying Employee's fullName on mouse over the name i need to display their details. How can i perform this action ? Can you please help me on this
It sounds like we've duplicated some work. Would you mind sending me your version so I can compare it against mine? I'd like to post some sort of update here for everyone, but it would be best if we put our heads together.
Mine also has some proprietary elements that I need to remove before posting.
I'm not sure of the rules on this site; should we start a new thread or continue this one? I feel like we're hijacking this one, even though Zichun has abandoned us.
I am integrating the auto complete in my web page. It works perfectly fine except for one thing. My we page has select boxes just below the text boxes. Now, when I enter some characters and the auto complete div list comes, it gets hidden on the places wherever the select box is. Can you please suggest me what should I do or is there any fix available for that?
I saw your responses and it looks you have got some fixes for the issues like the one above and memory leak. Can you post me the code urgently please.
Zichun is here...http://zichun.spaces.live.com
...but he seems to more into bs blogging than anything else these days.
I've got a very enhanced and stable version of this as well. I've run it on a 400,000 element array and it uses css for all aspects of the appearance, including a gradient shadow and scrollbar-enabled drop-down box.
The original was a good starting point, but needed a lot of work for mass production!
From previous posts people pointed out the following issues:
- the addEvent()/removeEvent() mechanisms may be non-optimal or slow or leak memory. One post said to put onFocus='actb(this, event, customarray);' inside of the input tag, but I can't figure out how to switch the onKeyDown, onBlur, and onKeyPress events over to this method. Can anyone give a more explicit fix?
- I'm not totally sure why you don't need the "new actb()" syntax when there's just one input, but you do when there are two.
Also, I have a question about the script...can it be modified to submit a value with the selection? Essentially I currently have a sign-up form that populates a DB with a dropdown selection's value. Each selection has a unique value -- in this case a school id number -- and I'd like to use this script functionality to help the user find his/her school rather than scroll down a massive list of schools.
A very nice implementation of an autocomplete!
I also have this memory leak (using Internet Explorer) after each refresh, using 10000 elements.
The first time everything loads very fast, then slower & slower.
I guess the object isn't cleaned up after a refresh?
-> any events still open?
this is a very serious problem. any ideas?
btw, I use multiple instances (max. 20), i.e. :
obj1 = new atcb(...);
obj2 = new atcb(...);
do I have to call atcb() with an empty array to clean up memory?
You have just hit on one of the primary things that I dislike about IE6(or lower). IE renders all drop down boxes in a strange way that will cause the boxes to appear above all other div layers regardless of z-index. There is a solution but it isn't pretty and I have not yet tried to implement it with this auto-complete control. (If you want to see the problem just create an absolute positioned div and place it over a drop down box in IE.) When I get back to work I will find the references that properly explain this problem if you are interested. In the mean time there is a fix involving placing an iframe directly beneath the div that is overlapping the select box. However, the iframe issue is only simple if the div has its width and height explicitly set. Again, I have a fix for dynamically sized div but I will have to get that code.
You could probably find the iframe solution by doing a google search on "iframe fix for select box IE problem" or something akin to that. Good luck. I will post more when I have my notes on the problem and the solution I implemented.
Thanks in advance, and sorry if my post is hard to understand, I'm not English/American