|
Hi Dmitry,
I was looking for some auto complete tool on the web and came across your tool. It is the best ever available and it matches with the requirement what we have right now. But, there is a single problem when it comes to SELECT boxes. The suggestion control is rendered behind these SELECT boxes. I saw there is one variable this.actb_useIFrame, setting this to true should have fixed the problem, but not in my case. I dont know why is it a bug in the way I am implementing it or there is some more configuration/code changes are required.
I would appreciate if you can look into this and let me know.
Attached is the screen shot for your reference and also attaching the autosuggest.js file for the reference where the value of this.actb_userIFrame is set to true.
I am using Internet Explorer 6.
Thanks a ton in advance.
I sent you the mail also with the attachment on your email address posted on the website.
Regards,
Ravi.
|
|
|
|
|
That's quite strange that this problem surfaced again; can you please e-mail me a sample HTML that shows the problem?
- Dmitry.
P.S. I've just re-checked; actb_useIFrame option works ok for me. Waiting for your e-mail.
P.P.S. I still haven't got your e-mail; please re-sent it to: dmitrykhudorozhkov@yahoo.com
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Problem was solved; it seems that I've finally found a all-around solution to the problem. The fix wil be included in the next release of the script (Oct. 30th).
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Next update will bring fixes to some small but annoying bugs, and (probably, not yet decided) a PHP, ASP.NET and Ruby-on-Rails sample web services for you to test the script.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thats great ....Waiting for 30th October
|
|
|
|
|
Hi,
Thanks for great control. This is very useful to me. I had a few questions... I need to show a simple error message if user input doesn't match with source. I'm giving a link to the server-side script to get the list(aspx page).Is it possible to show simple error message and call another URL for loading source. Please look into this and let me know the possibilites. It will be very helpful to me. Thanks in advance.
Priyatam
|
|
|
|
|
Not sure I understood what you exactly want, but:
1. Take a look at actb_penter method. There you should perform your comparison and alert the user of wrong input.
2. You can change the server URL anytime through the actb_suggesturl variable of the actb object.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thanks for the quick reply
I'm sorry that you didn't get what I said....lemme explain it clearly.
I have two types of lists....Generic lists and non-generic lists. Be default,I'm giving the server URL which returns Generic lists and so when user types, generic list values are shown up.
For ex: adam,eve,may are values in generic list. If user types "z" which doesn't match with current array...I have to show a error message...something like..."sorry,we dont have that name please select a value from the following list" and then call another server URL which returns non-generic list of values...so that I can show non-generic list values as suggestions.
Hope this is clear.... Your help is much needed.... thanks in advance
|
|
|
|
|
Now I got it.
You should check if the first URL returned any match at the very beginning of the done method. You should add:
done: function(ot, t)
{
if(ot.length < this.actb_startcheck) return;
if(!this.actb_keywords.length)
{
alert("sorry,we dont have that name please select a value from the following list");
this.actb_suggesturl = "new.server.com";
this.actb_tocomplete(0);
}
... Hope it helps,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thanks for the reply. It was really helpful. I was able to throw error message when input doesn't match with source. After that I'm giving new server URL again (for generic list), but it does not call this new URL. Simply throws "sorry,we dont...." message and nothing appears in the list.
And I'm not able to show error message and call new URL if user input mismatches after typing 2 or more letters. I set "actb_fullRefresh" to true and then I'm able to show error message and call new URL(though request is not sent to page . Is this recommended or is there any alternative.
Awaiting your help on this. I'm almost there in filling my requirement
|
|
|
|
|
Using "fullRefresh" option is ok for you, but:
1. My mistake; instead of:
done: function(ot, t)
{
if(ot.length < this.actb_startcheck) return;
if(!this.actb_keywords.length)
{
alert("sorry,we dont have that name please select a value from the following list");
this.actb_suggesturl = "new.server.com";
this.actb_tocomplete(0);
}
... Type:
done: function(ot, t)
{
if(ot.length < this.actb_startcheck) return;
if(!this.actb_keywords.length)
{
alert("sorry,we dont have that name please select a value from the following list");
this.actb_suggesturl = "new.server.com";
this.actb_toid = 1;
this.actb_tocomplete(0);
}
...
2. script always send only the first letter of the typed text to the server-side service; to change it, look at the line (actb_tocomplete method):
var ot_ = ((ot.length > 1) && !this.actb_fullRefresh) ? ot.substr(0, 1) : ot;
This might also be helpful to you.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Hi,
I tried to add the above lines. I was able to show error and call another server URL if user input does not match with non-generic name list. Also I was able to retrieve all the generic names from server-side service. ...Thanks for your help
But, when I clear all the text and type a letter, the code again calls new server URL instead of the default URL we have given. My requirement is to call new server URL only if input does not match,but not all the time. Can you please help me in doing this.... Thanks in advance
|
|
|
|
|
Priyatam K wrote: But, when I clear all the text and type a letter, the code again calls new server URL instead of the default URL we have given. My requirement is to call new server URL only if input does not match,but not all the time. Can you please help me in doing this.... Thanks in advance
You should check (at the beginning of the actb_checkkey method) if the input field contains any text (obj.actb_curr.value ), and if not - assign this.actb_suggesturl back to old URL.
Hope it helps,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Perfect..... Thanks for all your help Dmitry. My requirement is fullfilled. Now I have to fit this in my project. Hope everything goes well. Thanks again and Wish you all the best
Priyatam K
|
|
|
|
|
Hi Dmitry,
Just found a small bug in positioning suggestions div. I was creating a textbox dynamically and adding it to a panel (C#). After generating the control, if I scroll down the page and then type in the textbox, suggestions position is being displayed from actual top position(top positoin before scrolling). I have used the following function to get top and left positions.... and it works fine now.
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}
Thanks,
Priyatam
|
|
|
|
|
Hi Dimitry,
I had the immediate need of some additional fixes/features:
- Ability to display the list programmatically from outside code, e.g. a combo box dropdown button
- In addition to matching at beginning of string, also support matching at begging of words in the string
- If the minimum number of characters is 0, the list should be allowed to display when the text is blank, and should display all items (up to the specified max)
- The list gets re-ordered each time it is searched
- Issue with tabbing out of control when no item is selected
- Other minor issues with the list not showing or hiding consistently in different browsers
- Desire for more developer-friendly names for the “public” properties (e.g. the “actb_” prefix is unnecessary)
- zichun's original code was needlessly complex
Partly to address these issues and partly to make the code easier to understand so that I could more easily tweak the behavior, I have largely re-worked it. If you're interested I can send you the code. The downside to my changes for existing users is that I have changed the property names to make them clearer, so existing code would need to be modified to work with my changes.
Just thought I would let you know, and keep up the good work. I have voted for your article already!
Greg Bahns
-- modified at 1:18 Thursday 11th October, 2007
|
|
|
|
|
Hi Greg,
I'd be very grateful if you send your modification to me. All your changes look sweet
Thanks a lot,
Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Hi all!
Auto-suggest control is close to it's maturity, and I'm thinking (supported by multiple requests) to create an ASP.NET control out of this code. I'll also publish a webservice code (probably, as a separate article), that can be used with it.
What I'm asking is your advice. What features do you need? What should I add/omit/be aware of? I'm not so proficient in ASP.NET (I'm learning it intensively now), so I hope you'll give me some guidelines
Best regards & thank you for your support,
- Dmitry.
P.S. the updated article and code were sent to CP yesterday - a bit overdue, sorry. It will be available in a day or so.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
I fixed a positioning problem in IE6 when using this control nested inside other objects:
<code>
actb_clear: function() {
var msie = (document.all && !window.opera) ? true : false;
var event = window.event;
var doblur = true;
if (msie && event && this.cur_h) {
var x = event.offsetX;
var y = event.offsetY;
if (((x>0) && (x<(this.cur_w+18))) && ((y>0) && (y<(this.cur_h+18)))) {
this.actb_curr.focus();
doblur = false;
}
}
if (doblur) {
actb_RemoveEvent(document, "keydown", this.funcCheck);
actb_RemoveEvent(this.actb_curr, "blur", this.funcClear);
actb_RemoveEvent(document, "keypress", this.funcPress);
this.actb_removedisp();
}
},
</code>
You'll want to tweak this for other browsers. The "+18" is necessary to make sure the dropdown doesn't clear when the user tries to use the scrollbar. Again, you'll want to try various settings to work it out for all configurations.
|
|
|
|
|
The original actb was called like this:
new actb(document.getElementById('tb1'),customarray2);
The new one is called like this:
new actb('tb1',customarray2);
It might be helpful to include something in the instructions for those who simply want to drop this into their old code without modifying their old code.
|
|
|
|
|
You mean zichun's code -> new code? Will do it.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
That would be really great.
-- modified at 14:00 Tuesday 9th October, 2007
This would be needed for beckward compability:
this.actb_suggesturl = ( url || suggesturl )+ "?str="
|
|
|
|
|
|
Hi Dmitry,
Excellent work, thank you for doing it. Props to zichun also despite his disappearance.
I noticed that with your control there is a delay after typing before the list is updated. Zichun's original control did not exhibit this delay. It could be a design decision and I would guess if you're doing ajax calls it is appropriate to wait a second to see if the user stops typing before hitting the server, but when you have client-side lists it would be preferable to have instantaneous feedback.
Another problem I noticed is that although one of the stated goals of zichun's original control was to solve the problem where the user wants to type "apple" when "apple cart" is in the list. When the user hits ENTER or TAB, it auto-compltes to "apple cart". Not even hitting DELETE, as alluded to in zichun's article, avoids this result. Oddly, I don't think I've seen any posts about this problem. Am I missing something?
Another idea that I've had is that rather than first_only being true/false, it would be nice to have three options, say "anywhere", "first_of_text", and "first_of_word", where first_of_word would match any string starting at the beginning or after a space. For example, this would be useful in a list of full names, where the user could beginning typing either a first name or a last name.
One more idea I'm pondering is to include an optional dropdown arrow like you see with the traditional SELECT control to allow the user to just select from this list without typing anything. This would allow for a good hybrid where the user can go either route.
Lastly, for use in my projects I plan to turn this into a resuable .NET control. I envision using your code as is so that it would be easy to update my control with your latest whenever you come out with updates. If you don't object I may eventually post my .NET control in a separate article with a reference back to yours.
Thanks again for the great work and congratulations on the awards.
Greg
|
|
|
|
|
I noticed that ESC allows the user to close the list without auto-completing from the list. That's good.
However I discovered another problem. The list is displayed when you hit any key that is not explicitly checked for. For example, SHIFT, CTRL, ALT, left & right arrow, home, end, etc. I think it should only display when the user changes the string, and perhaps for certain pre-defined keystrokes. For example, with a standard dropdown list, ALT-DownArrow displays the list. I would also suggest that up & down arrow should display the list... currently if you have hidden the list by hitting ESC, then the up & down arrows don't seem to do anything.
Since it's complicated to determine which key codes change the text and which don't, I would simply track the value of the textbox named oldvalue, and only update the filter and display the list when oldvalue != value (i.e. the value has actually changed).
Back to the delay issue I mentioned in my previous post... to address this I changed this line:
obj.actb_toid = setTimeout(function() { obj.actb_tocomplete.call(obj, code) }, 500);
to this:
obj.actb_toid = setTimeout(function() { obj.actb_tocomplete(code) }, obj.actb_suggesturl.length ? 500 : 5);
So it only delays the half-second if you're using ajax. (Note: I tried to make it just call the function directly rather than using a 5ms timer, but the way it's implemented this did not work because it ended up filtering by the old value rather than the new value.)
Greg
|
|
|
|
|