|
Hi and great work on the code.
I'm having difficulty implementing it on a page where there is more then input field using the autosuggest (actb object).
How do I go about it?
|
|
|
|
|
1)
After I sat down and thought about it, it came to me:
added variable:
this.suggesturl
The function within autosuggest.js now would look like this:
function actb(id, ca,surl)
{
// Public Variables:
this.suggesturl = surl;
...
}
When the object is created, I pass the suggesturl value, in this example: './contact1_get.php' passed to surl above and then passed to this.suggesturl
new actb('Contact1', '', './contact1_get.php?');
This means that wherever suggesturl is referenced , i reference instead this.suggesturl
2)
One thing I noticed , separate from this immediate topic, is the Iframe option does not seem to fix the controls showing through the list ... so i make use of addition code to hide these controls. What am I doing wrong?
Best Regards and thank you.
|
|
|
|
|
Hi Alfonso,
alfonsopilato wrote: When the object is created, I pass the suggesturl value, in this example: './contact1_get.php'
new actb('Contact1', '', './contact1_get.php?');
This feature (distinct suggestion server url) will be added in next release.
alfonsopilato wrote: One thing I noticed , separate from this immediate topic, is the Iframe option does not seem to fix the controls showing through the list ... so i make use of addition code to hide these controls. What am I doing wrong?
Oops! I checked this too, and IFrame option, strangely enough, didn't work
I'm investigating this and post a solution as soon as I get it working.
- Dmitry.
P.S. BTW, could you please vote for this article in a CP Monthly survey:
http://www.codeproject.com/script/survey/survey.asp?survey=721
Thank you much in advance!
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
The beginning of the actb_generate method, i.e. everything before the line:
var first = true, j = 1; should be:
if(document.getElementById('tat_table_' + this.actb_base_id))
{
this.actb_display = false;
document.body.removeChild(document.getElementById('tat_table_' + this.actb_base_id));
}
if(this.actb_total == 0)
{
this.actb_display = false;
return;
}
var msie = (document.all && !window.opera) ? true : false;
var bb = document.createElement('div');
bb.id = 'tat_table_' + this.actb_base_id;
bb.style.position = 'absolute';
bb.style.border = '#000000 solid 1px';
this.cur_y = bb.style.top = eval(curTop(this.actb_curr) + this.actb_curr.offsetHeight) + "px";
this.cur_x = bb.style.left = curLeft(this.actb_curr) + "px";
this.cur_w = bb.style.width = this.actb_curr.offsetWidth + "px";
var cc = null;
if(msie && this.actb_useIFrame)
{
var cc = document.createElement('iframe');
cc.src = "";
cc.scrolling = "no";
cc.frameBorder = "0";
cc.style.position = "absolute";
cc.style.zIndex = 0;
cc.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);";
}
var a = document.createElement('table');
a.cellSpacing ='1px';
a.cellPadding ='2px';
a.style.width = "100%";
a.style.backgroundColor = this.actb_bgColor;
a.id = 'tat_table2_' + this.actb_base_id;
if(this.actb_useScroll && (this.actb_total > this.actb_lim))
{
this.cur_h = bb.style.height = (this.actb_lim * parseInt(this.actb_fSize) + 3) + 2 + "px";
bb.style.overflow = "auto";
bb.style.overflowX = "hidden";
}
this.cur_y = parseInt(this.cur_y);
this.cur_h = parseInt(this.cur_h);
this.cur_x = parseInt(this.cur_x);
this.cur_w = parseInt(this.cur_w);
document.body.appendChild(bb);
if(cc)
{
cc.style.top = a.offsetTop;
cc.style.left = a.offsetLeft;
bb.appendChild(cc);
}
bb.appendChild(a); This fix will be included in the next release. Sorry for inconvenience.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Hi Dimitri,
The fix works fine in the sense that controls behind the list do not poke through.
However it appears that mouse control (clicking to select) is disabled when I make use of this iFrame option.
I'm running I.E. 6.0.2800.1106 with SP1
|
|
|
|
|
The lines:
cc.style.zIndex = 0;
cc.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);";
should be:
cc.style.zIndex = -1;
cc.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0);";
This fixes the problem.
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
1) Great stuff re. distinct suggestion server url and BTW fix for the iFrame works great, HOWEVER it appears that when iFrame is enabled mouse control does not work (i.e cannot select an item rom the suggestions list using the mouse).
2) I got the three inputs using the autosuggest work fine with each their own distinct suggestion srever url, however I think I got this to work only by pure ingorance on my part. It works fine, however when I place an alert and inspect the url for each input, the last declared input's suggestion server url is what i see.. oddly enough it works :s
Will be looking forward to your upgrade so that I may see where I could have made improvements to my makeshift workaround.
Cheers.
-- modified at 22:55 Monday 17th September, 2007
|
|
|
|
|
First of all - good work. You've got my 5 points and vote.
Some suggestions though for future releases:
1. It would be better to make global variable suggesturl the actb public property.
It will be very useful for multiple controls on the same page.
2. In real life we very often are getting the user friendly input from GUI, but inside the application are using codes. In the case of select element it is simple with the value attribute. It would be very useful to have similar option in your control too.
3. It is the advantage of your control that it is pure Javascript and doesn't use the AJAX libraries, cumbersome as every common thing. But it will be the additional advantage, if you'll convert it to server control. It will not loose it's run time simplicity, but will be much more comfortable in definition and distribution.
For me the point 2 is the most important. I cannot use your control without it, and unfortunately I have no time just now to do it myself.
Thanks.
Regards,
Gennady
|
|
|
|
|
Hi Gennady,
Gennady Oster wrote: First of all - good work. You've got my 5 points and vote.
Thanks a lot!
Gennady Oster wrote: 1. It would be better to make global variable suggesturl the actb public property.
Will do it.
Gennady Oster wrote: 2. In real life we very often are getting the user friendly input from GUI, but inside the application are using codes. In the case of select element it is simple with the value attribute. It would be very useful to have similar option in your control too.
Will do it also in the next update (Sept. 20th)
Gennady Oster wrote: 3. It is the advantage of your control that it is pure Javascript and doesn't use the AJAX libraries, cumbersome as every common thing. But it will be the additional advantage, if you'll convert it to server control. It will not loose it's run time simplicity, but will be much more comfortable in definition and distribution.
It will be done, but in a (near) future. I'm learning ASP.NET intensively, so let's hope I'll come to it. But - I won't "convert", but create a separate package with a ASP.NET control.
Best regards,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Hi !
Dmitry Khudorozhkov wrote: Will do it also in the next update (Sept. 20th)
OK, thanks, shall wait it impatiently.
Dmitry Khudorozhkov wrote: But - I won't "convert"
Sure, "convert" is figuratively.
Don't forget to include the style attributes in the public properties of the control.
And BTW, may be it has sense to add the Css class property to actb object, as alternative (not substitute) to the multiple style attributes.
Regards,
Gennady
|
|
|
|
|
Gennady Oster wrote: 2. In real life we very often are getting the user friendly input from GUI, but inside the application are using codes. In the case of select element it is simple with the value attribute. It would be very useful to have similar option in your control too.
Can you please explain what exactly do you mean? Current version already has a switch (actb_useScroll ) that converts it to auto-suggest combo-box.
Or do I miss something?
Best regards,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
I mean that there has to be hidden item containing the code of the selected value.
For example, user selects the country name from the list of countries, but submit passes to the application the country code, not name. With select it is simple:
<select name="countries" size="5" id="countries"><br />
<option value="1" SELECTED>Russia</option><br />
<option value="2">USA</option><br />
<option value="3">Israel</option><br />
<option value="4">Great Britain</option><br />
<option value="5">France</option><br />
<option value="6">Italy</option><br />
</select>
May be I simply didn't understand how to do the same thing with auto-suggest control ?
And BTW, I had to add the following line to constructor:
ca = ca || '';
Without it, the script fails on ca.length, when using the new with the single parameter.
Regards,
Gennady
|
|
|
|
|
Now I understand. There are 2 solutions:
1:
- Add a public property value to the actb object;
- together with the suggestion variants, supply an additional list of values:
var custom_array = new Array(['abracadabra', 1], ['apple', 2], ['alligator', 3], ...); that are assigned to the value property once the appropriate variant is selected.
2:
- Add a public property selectedIndex ;
- not changing the format of custom_array , determine the index of the selected item and assign the selectedIndex to it.
Is that what you want?
Gennady Oster wrote: And BTW, I had to add the following line to constructor:
Thanks for taking a note, I'll look at this.
Best regards,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Dmitry Khudorozhkov wrote: Add a public property selectedIndex
OK.
Dmitry Khudorozhkov wrote: Add a public property value to the actb object
There is no need. We have already the public property actb_keywords.
So instead of
obj.actb_keywords = tmpinfo.split('|');
will be
obj.actb_keywords = tmpinfo.split('|');<br />
for (var ii=0;ii < obj.actb_keywords;ii++)<br />
{<br />
obj.actb_keywords[ii] = obj.actb_keywords[ii].split(',');<br />
}
And in all further operations with
actb_keywords[i]
use
actb_keywords[i][0] .
I can (and shall) do it myself, but I want to adjust it with you, in order not to rewrite application for new versions of your control.
Regards,
Gennady
|
|
|
|
|
Got it.
BTW, we already have the selectedIndex - it is the actb_pos property. Maybe I'll rename some variables to be more clear and consistent.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
OK. I'll wait for new version.
May be you'll also change the requirements for suggesturl? Let it be as complex as user needs:
Instead of
http.open("GET", suggesturl + "?str=" + ot_, true);
use
http.open("GET", suggesturl + ot_, true);
So user can add other parameters.
Regards,
Gennady
|
|
|
|
|
This article happened to participate in CodeProject's Monthly Programming Competition, ASP.NET section.
If you find this article useful, of just wish to express gratitude to the author, please vote for it here:
http://www.codeproject.com/script/survey/survey.asp?survey=721
Thank you very much in advance!
- Dmitry Khudorozhkov, author of the Auto-suggest control.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Third update will be ready by September 20th of this year. it will include a frequently-asked feature of no-default-suggestion (optional), more comments throughout the code, and some other minor improvements.
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Good job and keep up the good work
|
|
|
|
|
Thanks a lot
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Due to big number of article response, update of the article is delayed till September 10th of this year. It will bring several much asked features and article update.
Best regards,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
|
2nd upgrade of the auto-suggest script will include:
- ability to use a standard scrollbar instead of up/down "buttons" (optional, on by default);
- fix for the MS IE bug, when suggestion list was rendered behind page controls (optional, off by default);
- other minor improvements.
Update will be sent to CodeProject administrators in several hours.
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
have you fixed the stuff explained in the thread "Having no default suggestion"?
thats a big problem for me right now..
Thanks again
|
|
|
|
|
This is still pending. I'll come with the solution soon.
Best regards,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|