Complex Div's and AutoCompleting

[tommyboy123x]

Thought I'd share some help here - for some reason with my complex arrangement of divs and tables the autocomplete box would have an absolute position and be in the bottom right corner.  Normally i would just moved the bottom and right displacement, but i have multiple boxes on one page so this is not ok.

Now, i used box number 4 in the WICK Testing Grounds, but instead of saying width:300px; and stuff like that, i changed the value to width:auto; and it works like a charm as far as i can tell.  The program naturally limits itself to 15 results and i count all 15 with this method.

Thanks for the great program - more posts to come :-)

[tommyboy123x]

Had a problem with this field not closing the autocomplete box when the mouse clicked away (onblur) so i added these lines.

document.addEventListener("blur", handleBlur, true);
...
document.onblur = handleBlur;

so the total block of code is:

if (document.addEventListener) {
    document.addEventListener("keydown", handleKeyDown, false);
    document.addEventListener("keyup", handleKeyPress, false);
    document.addEventListener("mouseup", handleClick, false);
    document.addEventListener("mouseover", handleMouseOver, false);
    document.addEventListener("blur", handleBlur, true);
} else {
    document.onkeydown = handleKeyDown;
    document.onkeyup = handleKeyPress;
    document.onmouseup = handleClick;
    document.onmouseover = handleMouseOver;
    document.onblur = handleBlur;
}

[tommyboy123x]

if (document.addEventListener) {
    document.addEventListener("keydown", handleKeyDown, false);
    document.addEventListener("keyup", handleKeyPress, false);
    document.addEventListener("mouseup", handleClick, false);
    document.addEventListener("mouseover", handleMouseOver, false);
    document.addEventListener("blur", handleBlur, true);
    document.addEventListener("focus", handleFocus, true);
} else {
    document.onkeydown = handleKeyDown;
    document.onkeyup = handleKeyPress;
    document.onmouseup = handleClick;
    document.onmouseover = handleMouseOver;
    document.onblur = handleBlur;
    document.onfocus = handleFocus;

^^
also added an "onfocus" one so that when the user clicks the input box the list shows as it was.  The only obstacle left is to make it so that when the mouse is hovering one of the choices and the user is typing into the box it does not update the options.  This would be required for me so i'll be working on this and post an answer

[tommyboy123x]

a lot of problems were caused by the class not being the same for the div method, but most of them we don't want.  All i did was add in a bit of code with my class for the input in it.  my class was wickEnabled:inputbox.

for (i=0; i < allinputs.length;i++) {
    if ((c = allinputs[i].className) && (c == "wickEnabled:inputbox")) {
        allinputs[i].setAttribute("autocomplete","OFF");
        allinputs[i].onfocus = handleFocus;
        allinputs[i].onblur = handleBlur;
        allinputs[i].onkeydown = handleKeyDown;
        allinputs[i].onkeyup = handleKeyPress;
    }

The only bug still left is one with the entire code - when you type something in and put your mouse over one of the options (in firefox) the cursor flashes like crazy (indicating countless refreshing?) and as you type it does not change what content is in the auto complete box.

If i find a solution to this I'll post it.