Eden Ridgway's Blog

.Net and Web Development Information

  Home :: Contact :: Syndication  :: Login
  105 Posts :: 1 Stories :: 78 Comments :: 3 Trackbacks

Search

Article Categories

Archives

Post Categories

Development

General

/SubText/Imagesp down arrow next to a select list in windows XP looks different to that of windows 2000. Hence the illusion of the control being a funked up version of a normal drop down list is lost. However there is a way to effectively create the illusion if you place an input box on top of a select list. The user would then be allowed to type into the text box as if they were typing directly into the select and you could then use JavaScript to perform whatever logic you wanted. Unfortunately a select list appears over most HTML elements as it is a special windows control. However if you use region clipping you can hide the rendering of the part of the drop down list that contains the input control. The code below shows you how it is possible (please note that css expressions are only available in IE):
<html>

<style>

SELECT
{
top
: expression(this.previousSibling.offsetTop);
left
: expression(this.previousSibling.offsetLeft);
width
: expression(this.previousSibling.offsetWidth);
position
: absolute;
clip
: expression("rect(auto auto auto " + (this.previousSibling.offsetWidth - 20) + "px)");
overflow
: hidden;
}

</
style>

<script language="javascript">

var oNewOption = null;

function
AddListItem(oInput) {

var oSelect = oInput.nextSibling;

if
(oNewOption == null) {
oNewOption
= document.createElement("OPTION");
oSelect.options.add(oNewOption);
}

oNewOption.text
= oInput.value;
oNewOption.value = oInput.value;

}
</script>
<body>

<form id='Form1'>
<input id='txtInput' type='text' onkeyup="AddListItem(this)"/><select>
<option>abc</option>
<option>cde</option>
<option>efg</option>
</select>
</form>
</body>
</html>
Here is the code in action: EditableCombo.htm
posted on Saturday, October 15, 2005 2:18 PM
Comments have been closed on this topic.