Editable combobox with javascript (source included) - please feedback!

**RobG** · Jul 23 '05, 04:34 PM

Re: Editable combobox with javascript (source included) - pleasefeedback!

Oliver Hoehle wrote:[color=blue]
> Hello!
>
> This ist the source-code for an editable combobox implemented with
> HTML,CSS and Javascript.[/color]

Using a table to implement a select seems silly. Why not just put a
select under the text input that is shown when the button is clicked,
then when a selection is made, hide it again and put the selected text
into the text input?

Example below.
[color=blue]
>
> I have tested it with IE and Mozilla. But I don't know, if it will
> work in other browsers (Opera, Konqueror, etc.) So I need your
> feedback...[/color]

It sort of works in Safari, but:
[...][color=blue]
> <style type="text/css">
> <!--[/color]

Don't bother trying to hide scripts/styles
[color=blue]
> div.cbhide {
> position:absolu te;
> visibility:hidd en;
> overflow:hidden ;
> height:0px;
> }[/color]

Why change the class when you want to hide something? Just use:

elementRef.styl e.display = "none";
[color=blue]
> div.cbshow {
> position:absolu te;
> visibility:visi ble;
> overflow:visibl e;
> }[/color]

and to show it again:

elementRef.styl e.display = "";

If you want to use visibility:

elementRef.styl e.visibility = "hidden";
elementRef.styl e.visibility = "visible";

[...][color=blue]
> function mousedown(obj) {
> var select = document.getEle mentById('cbsel ect');[/color]

You should include a document.all method for old IE (see the group
faq at <URL:http://www.jibbering.c om/faq>).

[...][color=blue]
> function hide() {
> document.getEle mentById('cbsel ect').className ='cbhide';
> document.getEle mentById('cbbtn ').onclick=show ;
> document.onmous edown = null;
> return true;
> }
>[/color]

If you just position your select in the page with HTML and simply
hide/show it by changing its display attribute, you don't need either
of these functions.

A simple function could toggle the display attribute;

function showHide(anId) {
var thing;
if (document.getEl ementById) {
thing = document.getEle mentById(anId);
} else if (document.all) {
thing = document.all[anId];
}

if (thing.style.di splay == '') {
thing.style.dis play = 'none';
} else {
thing.style.dis play = '';
}
}

Of course, you can remove the above completely if you use the form
elements collection or reference form elements differently (see the
code below - it doesn't use getElementById or getElementsByTa gName).
[color=blue]
> function show() {
> var node = document.getEle mentById('cbtex t');
> var x = Number(node.off setLeft) + Number(document .body.leftMargi n);[/color]

Attempting to locate the coordinates of an element in the page in a
cross-browser manner is problematic. But if you just put the element
in the page where you want it, then show/hide it, you don't have to do
it at all.

Document.body.l eftMargin will not work in Safari (and I suspect
it's failing in all the other browsers too), try:

document.getEle mentsByTagName( 'body')[0].style.marginLe ft

similarly for your attempt at "topMargin" :

document.getEle mentsByTagName( 'body')[0].style.marginTo p

But this is dependent on the browser supporting getElementsByTa gName
and the DOM style object (so OK for IE 6 but probably not 5).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><ti tle>Editable Select</title>

<script type="text/javascript">
function showHide(btn,el e) {
if (ele.style.disp lay == 'none') {
ele.style.displ ay = '';
btn.value = 'Hide list';
} else {
ele.style.displ ay = 'none';
btn.value = 'Show list';
}
}

function addValue(sel,tx t) {
txt.value = sel[sel.selectedInd ex].value;
}
</script>

</head><body>

<form action="">
<input type="text" style="width: 150px" name="cbtext">
<input type="button" value="Show list" style="width: 10em;"
name="showHideB utton" onclick="
showHide(this,t his.form.fruitL ist);
"> 
<input type="reset">
<div style="position : relative;">
<select name="fruitList " style="display: none; position: absolute;"
onclick="
addValue(this,t his.form.cbtext );
showHide(this.f orm.showHideBut ton,this.form.f ruitList);
this.style.disp lay = 'none';
">
<option value="Apple" >Apple</option>
<option value="Cherry"> Cherry</option>
<option value="Melon" >Melon</option>
<option value="Lemon" >Lemon</option>
<option value="Peach" >Peach</option>
<option value="Plum" >Plum</option>
</select>
</div>
</form>
Here is some text. Here is some text. Here is some text. Here is some
text. Here is some text. Here is some text. Here is some text. Here
is some text. Here is some text. Here is some text. Here is some
text. Here is some text. Here is some text. Here is some text. Here
is some text. Here is some text. Here is some text. Here is some
text. Here is some text. Here is some text. Here is some text. Here
is some text. Here is some text. Here is some text. Here is some text.
</body>
</html>

And the caveats:

1. This page is utterly dependent upon JavaScript to function. I would
normally have made the select visible and hidden it with script when
the page loads, that way it would still be visible if JS is not
available/activated.

However since JS is required to put the selected value into the text
area anyway, there seems no point.

2. The text on the show list button changes, but it may be better to
just have "Show/hide list" and leave it at that. I hate things that
change when I don't expect it to. It may be better to have the button
hidden by default and only shown if JS is enabled. That way users wont
try to click on a button that doesn't do anything.

3. Please excuse my use of styles. I've used some minimal stuff just
for this demo.

I'm done.

--
Rob

Editable combobox with javascript (source included) - please feedback!

Editable combobox with javascript (source included) - please feedback!

Comment