Given the following example HTML page, how can I force the cbxSelect
box to drop down and show its contents when the user starts typing?
The current example works in Netscape 6, 7, Mozilla and IE 5.x & 6,
and so should the answer.
<html>
<head>
<title>Editable Select Box</title>
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd)
{
if (input.setSelectionRange)
{
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange)
{
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function getKey(e)
{
// have to check undefined as String() if you want it to work in IE5 on Mac
return ((String(e.which) == "undefined") ? e.keyCode : e.which);
}
function cbxMatch(edit, select, value, start, next)
{
var vl = value.toLowerCase();
if (next) // forwards
{
for (var i = (start + 1), il = select.options.length; i < il; i++)
{
var o = select.options[i];
var ov = o.text;
ov = (ov ? ov : "");
ovl = ov.toLowerCase();
if (ovl.substring(0, vl.length) == vl)
{
edit.value = ov;
setSelectionRange(edit, value.length, ov.length);
select.selectedIndex = o.index;
return i;
}
}
}
else // backwards
{
for (var i = (start - 1); i >= 0; i--)
{
var o = select.options[i];
var ov = o.text;
ov = (ov ? ov : "");
ovl = ov.toLowerCase();
if (ovl.substring(0, vl.length) == vl)
{
edit.value = ov;
setSelectionRange(edit, value.length, ov.length);
select.selectedIndex = o.index;
return i;
}
}
}
return start;
}
function cbxSelectChange()
{
var f = document.frm;
f.cbxText.value = f.cbxSelect.options[f.cbxSelect.selectedIndex].text;
}
var allowfocus = false;
var textkey = false;
var lastmatch = -1;
var lastval = "";
function cbxUnmatch(edit)
{
if (lastmatch != -1)
{
setSelectionRange(edit, lastval.length, lastval.length);
lastmatch = -1;
}
lastval = edit.value;
lastval = (lastval ? lastval : "");
}
function cbxTextKeyPress(e)
{
var k = getKey(e);
textkey = ((k >= 32) && (k <= 126));
}
function cbxTextKeyUp(e)
{
var k = getKey(e);
var f = document.frm;
if (textkey)
{
textkey = false;
lastval = f.cbxText.value;
lastval = (lastval ? lastval : "");
lastmatch = cbxMatch(f.cbxText, f.cbxSelect, lastval, -1, true);
}
else
{
switch (k)
{
case 38: // up arrow
{
// prev match
lastmatch = cbxMatch(f.cbxText, f.cbxSelect,
lastval, lastmatch, false);
break;
}
case 40: // down arrow
{
// next match
lastmatch = cbxMatch(f.cbxText, f.cbxSelect,
lastval, lastmatch, true);
break;
}
case 8: // backspace
case 27: // escape
case 35: // end
case 36: // home
case 37: // left arrow
case 39: // right arrow
case 45: // insert
case 46: // delete
{
// unmatch if editing
cbxUnmatch(f.cbxText);
break;
}
}
}
}
function shunt()
{
var f = document.frm;
if (!allowfocus)
{
f.cbxText.focus();
}
}
</script>
</head>
<body>
<form name="frm">
<br>
<br>
Select from the list or type in the box:<br>
<select name="cbxSelect" style="position: absolute; width: 219px;
clip:rect(auto auto auto 200px);" onChange="cbxSelectChange()"
onFocus="shunt()" onMouseOver="allowfocus = true;"
onMouseOut="allowfocus = false;">
<option>Corvette</option>
<option>Viper</option>
<option>Mustang</option>
<option>BMW</option>
<option>Ferrari</option>
</select>
<input name="cbxText" style="position: absolute; width: 200px;"
onKeyPress="cbxTextKeyPress(event)" onKeyUp="cbxTextKeyUp(event)">
<br>
<br>
</form>
</body>
</html> |
Clarification of Question by
mr_zorg-ga
on
17 May 2004 09:16 PDT
passive-ga,
Your first instict is correct -- I want to programatically open up the
select box. I agree that it probably can't be done, that's what all
my research came up with too. I'm hoping someone here can prove me
wrong. :-)
The reason I want this behavior is so that the user can see potential
matches in the list as they start typing.
Emulating this behavior through CSS, DHTML, etc., is certainly an
option, but (so far anyway) this seems like a simpler solution and
neatly solves the problem of making the dropdown button have a native
look and feel. If I were to emulate a select box, the button would,
no doubt, be a GIF...
Thanks!
|
