I've only been testing it in firefox though, and when I went to use it in IE (6), i noticed that the list shows up BEHIND other select dropdown boxes on the form page I'm using.
I've tried various things like setting a, r, and c.zIndex to be 5 and the select to be 1, and I've read some things about iframes, but I'm wondering if anyone knows of a more elegant solution or something I should investigate concerning this.
This is because SELECT elements in IE 6 and earlier are implemented as so-called "windowed" controls. Windowed controls ignore z-index and always appear in front. iframes are also windowed controls, and it sounds like one hack you've stumbled onto suggests using iframes to get things to show up in front of the pesky SELECT controls. The other workarounds I've seen are (a) hide all SELECTs on the form whenever anything is displayed that *might* be obstructed (ugly), (b) modify the form layout so SELECTs are never in the way.
I'm trying to append the "," after an item has been selected. Could someone show me how to do that or show me the code where it's returning the item? Thanks...
(1) In actb.js, ensure delimiters initialized: this.actb_delimiter = new Array(';', ',');
(2) In actb.js, add a new parameter to function actb() as actb(obj, ca, mouseSelectCallback);
fire this callback at the end of actb_mouseclick like this:
// The click event handler for the suggest table.
function actb_mouseclick(evt)
{
...
// Callback is fired when selection is made by mouse.
if (mouseSelectCallback)
{
mouseSelectCallback(actb_curr);
}
}
(3) Define these functions in your own script:
<script language="javascript">
function mouseSelectCallback()
{
// Append "," after a selection is made.
var textbox = document.getElementById('myTextbox');
textbox.value += ",";
}
function onKeyUpHandler(textbox, evt)
{
var keyCode;
if (window.event) keyCode = window.event.keyCode;
else if (evt && evt.which) keyCode = evt.which;
else if (evt && evt.charCode) keyCode = evt.charCode;
// Enter and Tab key are the selection keys.
if (keyCode == 13 || keyCode == 9)
mouseSelectCallback();
}
function enableACTB(textbox)
{
var obj = actb(textbox, myArray, mouseSelectCallback);
}
</script>
(4) Respond to these events of your textbox:
<input type="text" id="myTextbox" onkeyup="onKeyUpHandler(this, event);"
onfocus="enableACTB(this);">
I not understand code
what is 'tat_table'
why getelementbyid('tat_table')
i have problem in my project
i have two input box and use two array that query from database
two box use different array,from dirrerent field that have different data
one box use array1 and the other one use array2
but it show autocomplete in same array
Help me please
If u not understand that i explain u can e-mail to
supalak_cpe@hotmail.com
Some pages in my Web application contain drop down lists (HTML select tag) that have very long list of items. Using the up and down keys or scroll bar to find an item is not always easy. My manager wants some convenient ways to find an item from a very long drop down list.
After much researh on the Internet and I found this wonderful Auto-complete Control. Thanks to Zichun and all contributors! This is exactly what we wanted!
With some tweaks to actb.js, I was able to implement our incremental search functionality for a HTML select tag. Here's a summary of changes:
(1) Make it possible for the client to respond to the event when selection is made by mouse.
- A mouseSelectCallback is passed to function actb() as actb(obj,ca, mouseSelectCallback);
- Fire the mouseSelectCallback at the end of function actb_mouseclick();
(2) Pair a navigatin row (row with /\ or \/) with place holder row when necessary to make sure
user won't accidently select an item when using mouse to navigate the list.
(3) Make sure the key events are still alive even after mouse is used to navigate. This is done
by ensuring that it's not in mouse navigation mode before remove all events in function
atcb_clear().
(4) Add some global variable to control the styles of the navigation row.
Here's the code:
function actb(obj,ca, mouseSelectCallback){
/* ---- Public Variables ---- */
.
.
.
// Insert a up-arrow navigation row to the specified suggestTable.
function actb_add_up_arrow_row(suggestTable)
{
c = actb_add_nav_row(0, suggestTable, actb_up_arrow);
c.style.fontSize = actb_arrow_fSize;
c.style.fontWeight = actb_arrow_fWeight;
if (actb_self.actb_mouse)
{
c.style.cursor = 'pointer';
c.onclick = actb_mouse_up;
}
}
// Insert a down-arrown navigation row to the specified suggestTable.
function actb_add_down_arrow_row(suggestTable)
{
c = actb_add_nav_row(-1, suggestTable, actb_down_arrow);
c.style.fontSize = actb_arrow_fSize;
c.style.fontWeight = actb_arrow_fWeight;
if (actb_self.actb_mouse)
{
c.style.cursor = 'pointer';
c.onclick = actb_mouse_down;
}
}
// Insert a up-arrow placeholder row to the specified suggestTable.
function actb_add_up_arrow_placeholder(suggestTable)
{
c = actb_add_nav_row(0, suggestTable, ' ');
c.style.fontSize = actb_arrow_fSize;
c.style.fontWeight = actb_arrow_fWeight;
c.onclick = actb_placeholder_click;
}
// Insert a down-arrow placeholder row to the specified suggestTable.
function actb_add_down_arrow_placeholder(suggestTable)
{
c = actb_add_nav_row(-1, suggestTable, ' ');
c.style.fontSize = actb_arrow_fSize;
c.style.fontWeight = actb_arrow_fWeight;
c.onclick = actb_placeholder_click;
}
// Insert a navigation row with the specified HTML at
// the specified index to the specified suggesTable.
function actb_add_nav_row(index, suggestTable, strHTML)
{
r = suggestTable.insertRow(index);
r.style.backgroundColor = actb_self.actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_self.actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_self.actb_fSize;
c.align='center';
c.innerHTML = strHTML;
c.onmouseover = actb_mouse_nav_row_mouseover;
c.onmouseout = actb_mouse_nav_row_mouseout;
return c;
}
function actb_mouse_nav_row_mouseover()
{
actb_mouse_navigate = true;
}
function actb_mouse_nav_row_mouseout()
{
actb_mouse_navigate = false;
}
function actb_placeholder_click()
{
setCaret(actb_curr, actb_curr.value.length);
}
// The click event handler for the suggest table.
function actb_mouseclick(evt){
if (!evt) evt = event;
if (!actb_display) return;
actb_mouse_on_list = 0;
actb_pos = this.getAttribute('pos');
actb_penter();
// Callback is fired when selection is made by mouse.
if (mouseSelectCallback)
{
mouseSelectCallback(actb_curr);
}
}
.
.
.
return this;
}
I'm using a cf loop query to populate the array (customarray) and have run into some problems. I'm using 5 autocomplete textboxes, all with the same object (customarray), but there seems to be a limit to how many elements can be put into the array... Unless I limit my query to 1400 records I get these errors:
Expected ')'
AND
'customarray' is undefined
I also get the same errors every time I use a preceeding form to add to the WHERE criteria in the query, even when there are less elements in the array.
Thanks for any help in advance.
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?
Best regards,
- Dmitry.
-------------------------
Listen up! Teamwork means staying out of my way! (Seifer, Final Fantasy 8).
you can give it a try through a hyperlink?
my problem was the memory leak, probably caused by the addevent method which is not cleaned up after auto-unloading the object
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???
this is really the most useful yet simple javascript control on the net!