Actually, based on Joe's suggestion, I just threw it together just now.
This is literally hacked together off the top of my head, and only tested
in IE 6... I can see some things I'd want to fix already, but that's what
you get from 5 minutes of hacking! Might make a good candidate for
inclusion in the UIWidgets taglib of Java Web Parts, but feel free to roll
a custom tag with it yourself (and contribute it back if you wish!),
otherwise I'll add it to my own to-do list...
<html>
<head>
<title>test</title>
<script>
function dropdown() {
obj = document.getElementById("ddspan");
if (obj.style.visibility == "visible") {
obj.style.visibility = "hidden";
} else {
obj.style.visibility = "visible";
}
}
function setVal(inVal) {
document.getElementById("tb").value = inVal;
dropdown();
}
function mOver(inObj) {
inObj.style.backgroundColor = "#ff0000";
}
function mOut(inObj) {
inObj.style.backgroundColor = "";
}
</script>
</head>
<body>
<input name="tb" type="text" size="20" readonly style="border:1 solid
#00000;font-size:12pt;height:28px;"><span onClick="dropdown();"
style="position:relative;top:-2;left:-1;font-size:12pt;height:28px;border:1
solid #000000;">∇</span>
<br>
<span id="ddSpan" style="width:168px;padding:4;border:1 solid
#000000;visibility:hidden;position:relative;top:-3;">
<table border="0" cellpadding="0" cellspacing="0"
style="font-size:12pt;">
<tr onClick="setVal('Lightning');" onMouseOver="mOver(this);"
onMouseOut="mOut(this);">
<td><img src="
Loading Image...
"></td>
<td width="100%"> Lightning</td>
</tr>
<tr onClick="setVal('House');" onMouseOver="mOver(this);"
onMouseOut="mOut(this);">
<td><img src="
Loading Image...
"></td>
<td> House</td>
</tr>
<tr onClick="setVal('Envelope');" onMouseOver="mOver(this);"
onMouseOut="mOut(this);">
<td><img src="
Loading Image...
"></td>
<td> Envelope</td>
</tr>
</table>
</span>
</body>
</html>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
AIM: fzammetti
Yahoo: fzammetti
Post by Faisal MahmoudOkay, somewhere in my head I can remember seeing an example of this,
but I can't recall where it was. Sounds like the solution (if one
exists) is non-trivial. Appreciate the ideas and if I do come across
or develop some sort of solution I will post back to this thread.
Post by Frank W. ZammettiI was thinking you could build an actual "custom control" to do this, and
that's a good start... add a down arrow to the right of it to show the
dropdown portion and lock the textbox from editing and you'd have a good
start.
Thanks Joe!
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
AIM: fzammetti
Yahoo: fzammetti
Post by Joe GermuskaPost by Frank W. ZammettiThis isn's something that is possible in straight HTML. There could
be a
Post by Joe GermuskaPost by Frank W. Zammettiway to do it via CSS, but nothing obvious presents itself to me... I tried
setting a background-image, but that didn't work.
Can you find an example of it being done? Unless there's some non-obvious
CSS trick, or perhaps some non-standard browser extension, I'd bet
this
Post by Joe GermuskaHere's an example of something a user might not distinguish from what
is described, although it wouldn't be using <select>
http://script.aculo.us/demos/ajax/autocompleter_customized
By using DHTML like this and having an event cause a hidden form
field value to be set, you could achieve the goal.
Note that Scriptaculous builds upon the Prototype library, which
breaks commons-validator client side javascript validation.
Joe
--
Joe Germuska
http://blog.germuska.com
"Narrow minds are weapons made for mass destruction" -The Ex
---------------------------------------------------------------------
--
http://www.quidprocode.com
---------------------------------------------------------------------
