PHP Classes

Autofill with form in table.

Recommend this page to a friend!

      AutoFill  >  All threads  >  Autofill with form in table.  >  (Un) Subscribe thread alerts  
Subject:Autofill with form in table.
Summary:JS dosn't get the offsetTop if the <input> is in a table
Messages:7
Author:Nicolas Dalpé
Date:2005-03-26 21:26:31
Update:2005-04-12 19:50:10
 

  1. Autofill with form in table.   Reply   Report abuse  
Picture of Nicolas Dalpé Nicolas Dalpé - 2005-03-26 21:26:31
The autoFill JavaScript dosn't get the offsetTop if the <input> is in a table. The problem seems to be on this line :

box.style.top =
obj.offsetTop + ((obj.style.height != "") ? parseInt(obj.style.height) : 22);

Anyone have an idea?

thx

  2. Re: Autofill with form in table.   Reply   Report abuse  
Picture of Edward Dias Edward Dias - 2005-03-28 23:40:10 - In reply to message 1 from Nicolas Dalpé
I would be great to get an answer on this problem!
Or maybe the author can emplement this as an enhancement.

  3. Re: Autofill with form in table.   Reply   Report abuse  
Picture of xt xt - 2005-04-07 22:19:09 - In reply to message 2 from Edward Dias
Same problem overhere, I can't get the autofill-box positioned under the input-field... Tried different positioning-variables (relative/absolute, top/left-values... nothing seems to be working...)


  4. Re: Autofill with form in table.   Reply   Report abuse  
Picture of xt xt - 2005-04-07 22:48:17 - In reply to message 3 from xt
Finally, I found 'simple' a solution to this problem:

2 steps:

Step 1)
Place the INPUT-tag inside a DIV-tag as follows:
(acknowledge the id-value for the DIV-tag)

[code]
<div style="position: relative;" id="fieldid_div">
<input TYPE ="TEXT" id="fieldid" />
</div>
[/code]


Step 2)
Look up the following lines inside the class:

[OLDcode]
box.style.position = "relative";
box.style.top = obj.offsetTop + ((obj.style.height != "") ? parseInt(obj.style.height) : 22);
box.style.left = obj.offsetLeft;
[OLDcode]

[REPLACEcode]
box.style.position = "absolute";
objdiv = document.getElementById(id+"_div");
box.style.top = objdiv.offsetTop + ((objdiv.style.height != "") ? parseInt(objdiv.style.height) : 22);
box.style.left = objdiv.offsetLeft;
[/REPLACEcode]




  5. Re: Autofill with form in table.   Reply   Report abuse  
Picture of Edward Dias Edward Dias - 2005-04-07 23:13:49 - In reply to message 4 from xt
xt,

I'm not able to get it to work after making the changes you recomend...
the popups no longer shows.

Can you send me an html page code sample where the autofill works with in a table?

my address [email protected]

Thanks,

  6. Re: Autofill with form in table.   Reply   Report abuse  
Picture of Edward Dias Edward Dias - 2005-04-07 23:46:14 - In reply to message 5 from Edward Dias
xt,

I got the text to show next to the input box, but
now when I click on the select text it does not populate the input box.

Any suggestions?
A sample html page would be greatly appriciated.

TIA,
Edward

  7. Re: Autofill with form in table.   Reply   Report abuse  
Picture of xt xt - 2005-04-12 19:50:10 - In reply to message 5 from Edward Dias
The following code does the work:

<html><head></head>




<script type="text/javascript">
/**
* automatic fill for text fields
*
* @author: Carlos Reche
* @email: [email protected]
* @date: Feb 14, 2005
*/
function AutoFill(id)
{
if (!document.customProperties)
document.customProperties = new Array();
if (!document.customProperties[id])
document.customProperties[id] = new Object();
if (!document.customProperties[id].autoFill)
document.customProperties[id].autoFill = new Object();
document.customProperties[id].autoFill.options = new Array();
document.customProperties[id].autoFill.limit = 10;
document.customProperties[id].autoFill.submitOnFill = false;

this.id = id;
this.addOption = AutoFill_addOption;
this.limit = AutoFill_limit;
this.submitOnFill = AutoFill_submitOnFill;

addEvent(window, "load", function(){startAutoFill(id);} );
}
function AutoFill_addOption(option)
{
document.customProperties[this.id].autoFill.options.push(option);
document.customProperties[this.id].autoFill.options.sort();
}
function AutoFill_limit(limit)
{
document.customProperties[this.id].autoFill.limit = limit;
}
function AutoFill_submitOnFill(bool_submit)
{
document.customProperties[this.id].autoFill.submitOnFill = (typeof(bool_submit) == "undefined") ? true : bool_submit;
}

function startAutoFill(id)
{
obj = document.getElementById(id);
objdiv = document.getElementById(id+"_div");
addEvent(obj, "keyup", autoFillShowMatches);
addEvent(obj, "focus", autoFillShowMatches);
addEvent(obj, "blur", function(){autoFill_HideBoxOnBlur(id);} );

var box = document.createElement("div");
box.id = "AutoFill_" + id;
box.className = "AutoFill_box";
box.style.display = "none";
box.style.position = "absolute";
box.style.top = objdiv.offsetTop + ((objdiv.style.height != "") ? parseInt(objdiv.style.height) : 22);
box.style.left = objdiv.offsetLeft;
document.body.appendChild(box);
}

function autoFillShowMatches(e)
{
if (typeof(e) == "undefined")
var e = window.event;
var source = e.target ? e.target : e.srcElement;
if (source.nodeType == 3)
source = source.parentNode;

var box = document.getElementById("AutoFill_" + source.id);
box.style.display = "none";
box.innerHTML = "";

if (source.value != "")
{
var autoFill = document.customProperties[source.id].autoFill, matches = new Array();
var pattern = source.value.replace(/([\\\|\.\+\*\?\[\^\(\$\)])/gi, "\\$1");
pattern = new RegExp("^"+pattern, "i");

for (var i = 0; i < autoFill.options.length; i++)
if (autoFill.options[i].match(pattern) && (autoFill.options[i] != source.value))
matches.push(autoFill.options[i]);

for (var i = 0; (i < matches.length) && ((i < autoFill.limit) || (autoFill.limit < 0)); i++)
{
box.style.display = "block";
box.innerHTML += "\n<div class=\"AutoFill_item\"><a href=\"javascript: void(0);\" onmousedown=\"javascript: autoFill_SetFieldValue('" + source.id + "', '" + matches[i] + "');\">" + matches[i] + "</a>\n</div>";
}

if ((autoFill.limit < matches.length) && (autoFill.limit >= 0))
box.innerHTML += "\n<div class=\"AutoFill_more\">\...\n</div>";
}
}


function autoFill_SetFieldValue(objId, newValue)
{
obj = document.getElementById(objId);
obj.value = newValue;
obj.focus();
autoFill_HideBox(objId);

if (document.customProperties[objId].autoFill.submitOnFill)
{
var form = obj.parentNode;
while (!form.nodeName.match(/^form$/i) && (form != null))
{
form = form.parentNode;
}
if (form != null)
form.submit();
}
}

function autoFill_HideBox(textFieldId)
{
document.getElementById("AutoFill_" + textFieldId).style.display = "none";
}
function autoFill_HideBoxOnBlur(textFieldId)
{
setTimeout("autoFill_HideBox('" + textFieldId + "')", 300);
}


function addEvent(obj, evType, fn)
{
if (typeof(obj) == "string")
obj = document.getElementById(obj);

if (obj.addEventListener)
obj.addEventListener(evType, fn, true);
if (obj.attachEvent)
obj.attachEvent("on"+evType, fn);
}
</script>

<script type="text/javascript">
AutoFill_poster = new AutoFill("poster");
AutoFill_poster.limit(-1);
AutoFill_poster.submitOnFill(false);
AutoFill_poster.addOption("NationalTreasure.jpg");
AutoFill_poster.addOption("DerUntergang_websize.jpg");
AutoFill_poster.addOption("TheAviator_websize.jpg");
AutoFill_poster.addOption("SpongebobSquarepants_websize.jpg");
AutoFill_poster.addOption("Lepel_websize.jpg");
AutoFill_poster.addOption("StreepWilRacen.jpg");
AutoFill_poster.addOption("PlopEnKwispel.jpg");
AutoFill_poster.addOption("VetHard.jpg");
AutoFill_poster.addOption("MeetTheFockers_web.jpg");
AutoFill_poster.addOption("TheGrudge.jpg");
AutoFill_poster.addOption("Closer.jpg");
AutoFill_poster.addOption("Constantine_websize.jpg");
AutoFill_poster.addOption("TheAviator_Oscar.jpg");
AutoFill_poster.addOption("TheRing2.jpg");
AutoFill_poster.addOption("MissCongeniality2.jpg");
AutoFill_poster.addOption("TheRing2_websize.jpg");
AutoFill_poster.addOption("Robots.jpg");
AutoFill_poster.addOption("BeCool.jpg");
AutoFill_poster.addOption("Hitch.jpg");
AutoFill_poster.addOption("Ray.jpg");
AutoFill_poster.addOption("TheHitchhikersGuideToTheGallaxy.jpg");
AutoFill_poster.addOption("TheInterpreter.jpg");
AutoFill_poster.addOption("TheStationAgent.jpg");
AutoFill_poster.addOption("WarOfTheWorlds.jpg");
AutoFill_poster.addOption("WhiteNoise.jpg");
AutoFill_poster.addOption("AfterTheSunset.jpg");
AutoFill_poster.addOption("BatmanBegins.jpg");
AutoFill_poster.addOption("DearFrankie.jpg");
AutoFill_poster.addOption("HarryPotterAndTheGobletOfFire.jpg");
AutoFill_poster.addOption("KingKong.jpg");
AutoFill_poster.addOption("NobodyKnows.jpg");
AutoFill_poster.addOption("RedDust.jpg");
AutoFill_poster.addOption("SinCity.jpg");
AutoFill_poster.addOption("MillionDollarBaby.jpg");
AutoFill_poster.addOption("SonoftheMask.jpg");
</script>



<table>
<tr><td>

<div style="position: relative;" id="poster_div">
<input id="poster"

type="text" class="form_invoerveld"
maxlength="255"
value=""
name="record[img_affiche]"
size="100"/></div>
</td></tr>
</table>
</body>
</html>