|
Update has been sent to CodeProject administrators to update the article and code. Changes:
- now it is possible to create independent actb objects (independent suggestion lists);
- scrolling is now possible with both mouse and keyboard;
- ESC key now closes the suggestion list;
- arrow images now play better with browser caches;
- fixed problem with TAB key switching focus too early;
- fixed problems with INPUT box loosing focus (and making auto-suggest control disfunctional) in some cases.
The "no default suggestion" feature (requested earlier on this forum) will be included into next update (due to Sept 4th). Sorry, I just hadn't enough time to implement it
- Dmitry Khudorozhkov.
-- modified at 12:38 Thursday 30th August, 2007
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Article updated, enjoy
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
As I mentioned before in the Zichun's article: are you interested in making this control more useful and complete?
Mine is a lot like your improved version, but it...
- retains the original "highlight letter" function
- uses css for all styles
- replaces the up/down arrows with a much more useful scrollbar
- allows the list to be limited to x number of matches
- corrects a hidden positioning flaw when the tool is used inside 3rd part grid controls
- accepts other keystrokes like tab and arrow keys (again, for use in 3rd party grids)
I can send you some code samples if you have time to incorporate them into yours. I don't have time to do it myself. If you'd rather add these things yourself, that's cool too. I know it can be hard to incorporate some else's code.
Keep up the good work!
|
|
|
|
|
Hi!
Sorry for not answering your previous post.
Can you please send me your script? I'll mention you in the article as a contributor, of course.
Best regards,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Great control.
One problem, when the control drops down, its behind any controls below, can this be sorted ?
|
|
|
|
|
Phillip Ward wrote: One problem, when the control drops down, its behind any controls below, can this be sorted ?
You can assign a z-index property to the style of created table (see actb_generate function). Assign it to 999 and this will (hopefully) help you.
- Dmitry Khudorozhkov.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Quick Response
tried adding a line....
a.style.z-index = '999';
but it doesn't like it ?
Regards
Phil
|
|
|
|
|
Phillip Ward wrote: a.style.z-index = '999';
Should be:
a.style.z-index = 999;
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Got a bit further....
should be zindex not z-index but still problem persists
Regards
Phil
|
|
|
|
|
Phillip, can you please e-mail me a sample page describing the problem? I'll fix it much faster then.
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Problem solved, fix will be included into the next release.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
If your problem is that it is behind regular dropdown controls -
try the latest version. It has an option for the control to appear
in front of them.
|
|
|
|
|
The latest version did solve the problem
Dimitry added zindex to the code.
Thank you for your response.
Regards
Phil
|
|
|
|
|
Hi,
Many thanks to you for sharing it.
It seems like ESC key does not work properly in firefox. behavior is as desired in IE. Please check it.
|
|
|
|
|
Abhishek-Tiwari wrote: It seems like ESC key does not work properly in firefox. behavior is as desired in IE. Please check it.
I'll check it, thanks for reporting.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thanks for updating and fixing the original auto-complete control. I was wondering if it was possible to not have a default suggestion, such that pressing Enter without selecting an option will just leave the box as it is.
For example, consider the sample table you included with the script file. If I typed in "king", and pressed enter, the control would substitute it with "kingbird". This is handy, but may not always be desirable - what if I actually wanted to enter in "king"?
So one solution would involve none of the suggestions being selected until the user either mouses over the pop-up box, or presses the cursor keys to navigate through the list. Only then, would pressing enter cause the text in the box to be substituted.
For search suggestions, this would be really useful. Currently if a user wants to search for a particular name, the auto-suggest has the potential to "hijack" their search and replace it with something else. If there was no default suggestion, then the suggest would remain just a suggestion.
Thanks!
|
|
|
|
|
Hi!
Thanks for your reply, I will surely consider fixing this.
The (preliminary) date for next release is tomorrow.
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thanks for a wonderful update on this control!
I was just about to say exactly the same as tensheapz
An other thing, the timeout doesn't seem to work, I get a javascript error when trying to use that.
thanks again!
/Jimmie
|
|
|
|
|
It's useful to be able to install autosuggest.js and the arrow images in a support directory that is different from where the code is installed. The following patch adds support for a actb_imgdir variable which is the path to the arrow images on the server. Without modifying the default or specifying this variable, functionality of the script is unchanged.
Dave
<br />
--- autosuggest_src/autosuggest.js 2007-08-23 22:23:14.000000000 -0500<br />
+++ autosuggest/autosuggest.js 2007-08-27 21:42:28.230790400 -0500<br />
@@ -37,6 +41,7 @@<br />
this.actb_mouse = true;
this.actb_delimiter = new Array(';',',');
this.actb_startcheck = 0;
+ this.actb_imgdir = '';
<br />
<br />
<br />
@@ -86,8 +91,8 @@<br />
var i1 = new Image(), i2 = new Image(),<br />
i3 = new Image(), i4 = new Image();<br />
<br />
- i1.src = "arrow-down.gif", i2.src = "arrow-down-d.gif";<br />
- i3.src = "arrow-up.gif", i4.src = "arrow-up-d.gif";<br />
+ i1.src = this.actb_imgdir + "arrow-down.gif", i2.src = this.actb_imgdir + "arrow-down-d.gif";<br />
+ i3.src = this.actb_imgdir + "arrow-up.gif", i4.src = this.actb_imgdir + "arrow-up-d.gif";<br />
<br />
addEvent(this.actb_curr, "focus", this.actb_setup);<br />
<br />
@@ -202,7 +207,7 @@<br />
c.style.fontSize = this.actb_arrowSize;<br />
c.style.cursor = 'default';<br />
c.align = 'center';<br />
- replaceHTML(c, "arrow-up-d.gif");<br />
+ replaceHTML(c, this.actb_imgdir + "arrow-up-d.gif");<br />
}<br />
<br />
if (this.actb_bool[i] && (counter < this.actb_lim))<br />
@@ -256,7 +261,7 @@<br />
c.style.fontSize = this.actb_arrowSize;<br />
c.style.cursor = "pointer";<br />
c.align = 'center';<br />
- replaceHTML(c, "arrow-down.gif");<br />
+ replaceHTML(c, this.actb_imgdir + "arrow-down.gif");<br />
}<br />
<br />
this.actb_rangeu = 1;<br />
@@ -293,7 +298,7 @@<br />
c.style.fontSize = this.actb_arrowSize;<br />
c.style.cursor = 'default';<br />
c.align = 'center';<br />
- replaceHTML(c, b ? "arrow-up.gif" : "arrow-up-d.gif");<br />
+ replaceHTML(c, b ? this.actb_imgdir + "arrow-up.gif" : this.actb_imgdir + "arrow-up-d.gif");<br />
}<br />
<br />
for (var i = 0; i < this.actb_keywords.length; i++)<br />
@@ -334,7 +339,7 @@<br />
c.style.fontSize = this.actb_arrowSize;<br />
c.style.cursor = 'default';<br />
c.align='center';<br />
- replaceHTML(c, b ? "arrow-down.gif" : "arrow-down-d.gif");<br />
+ replaceHTML(c, b ? this.actb_imgdir + "arrow-down.gif" : this.actb_imgdir + "arrow-down-d.gif");<br />
}<br />
},<br />
|
|
|
|
|
Dmitry. Great job here! My question is how can you make it so that when someone clicks the enter key that whatever item is on the list is automatically submitted to a form. Right now the enter key fills in the highlighted word in the textbox but requires another push of the enter key. It would be great if it happens all at once.
Cheers!
|
|
|
|
|
londoncalling wrote: Great job here!
Thanks a lot for your words.
londoncalling wrote: My question is how can you make it so that when someone clicks the enter key that whatever item is on the list is automatically submitted to a form. Right now the enter key fills in the highlighted word in the textbox but requires another push of the enter key. It would be great if it happens all at once.
You should:
1. Somehow store the form id (as a part of actb constructor, maybe);
2. Edit the actb_checkkey function, so it will look like:
actb_checkkey: function(evt)
{
...
switch(a)
{
case 13: case 9:
if(obj.actb_display)
{
obj.actb_caretmove = 1;
obj.actb_penter();
var form = document.getElementById(formId);
form.submit;
return false;
}
break;
}
You should test it, though.
Hope it helps,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Nice work. This is what I'm looking to do.
I cannot use the mouse to scroll. The keyboard arrows keys work.
Also, once I click in the list, my arrows keys break.
Thanks for effort.
|
|
|
|
|
Hi,
jrb2 wrote: I cannot use the mouse to scroll. The keyboard arrows keys work.
I'll add this functionality. Next update is due to August 30th.
jrb2 wrote: Also, once I click in the list, my arrows keys break.
Could you clarify this? How to reproduce it?
jrb2 wrote: Thanks for effort.
Thanks for your words. And, if it won't bother you, can you please vote for the article? Every vote makes a difference, you know
Best regards,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Hi Dmitry,
Dmitry Khudorozhkov wrote: jrb2 wrote:
Also, once I click in the list, my arrows keys break.
Could you clarify this? How to reproduce it?
T reproduce... Click the top or bottom scroll bar and the text box loses focus. Even though the mouse pointer is on the list, I no longer can use the arrow keys to scroll. Click the text box it give focus and the arrows keys work.
Nice job! Look forward to a very favorable review after I look at the code a bit.
-Jeff
|
|
|
|
|