Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DropDownList behind a TextBox (in asp.net page)?

Status
Not open for further replies.
StevenK

StevenK

Programmer
Jan 5, 2001
1,294
GB
Someone suggested that javascript would be the way to go with this one .... :)
Can anyone offer assistance ?

I'm looking for some way of replicating what would be a dropdownlist that allows the user to type directly into it.
(For instance like the standard Visual Studio C# ComboBox component if set to DropDown style - allowing free-type entry or selection from drop down).
In order to do this I've tried to put a DropDownList component behind a TextBox component on a web form - with the TextBox being loaded with the selected string from the DropDownList each time the item selected changes.
However on doing this the DropDownList always takes prominence and sits on top of the TextBox.
Can anyone suggest a workaround for me ? In order to get what I'm trying to achieve (I'm none to keen on custom controls - I'm trying to keep it raw).

Thanks in advance
Steve
 
Sort by date Sort by votes

Hiya,

I think you're making like a bit tricky for yourself the way you're trying to do it. I wanted exactly the same thing - a combobox on a web page - and the way I did it was to have a text box with a dropdown arrow image at the far right of it, then a div with my options in it that could be hidden or unhidden when you clicked on the arrow image - the end result is the same as a drop down box and with a bit of javascript to set the value of the text box depending on which element inside the div you click on, it behaves the same way too.

I don't know if this'll be any help, but here's the php function I wrote to do this - you can extrapolate the HTML :)

Enjoy,

Paul


function HTML_comboBox2($id)
{
GLOBAL $arrCourses;
$strOpt = "0";
$strOnFocus = $id."_bg.style.display=\"block\";".$id."_buttons.style.display=\"block\"";
$strOnBlur = $id."_bg.style.display=\"none\";".$id."_buttons.style.display=\"none\"";

$strHTML = "<form id='".$id."' method='get' action='managev3.php'>";
$strHTML .= "<input type='hidden' name='page' value='course'>";
$strHTML .= "<input type='text' id='".$id."_text' style='color:#00007f;height:30;z-index:2' value='".$arrCourses[0]->courseName."' onfocus='".$strOnFocus."' onblur='".$strOnBlur."'>";
$strHTML .= "<img src='/images/icons/dropDown.png' style='z-index:3;position:absolute;left:175;top:48' class='out' style='cursor:pointer' onmouseover='this.className=\"over\"' onmouseout='this.className=\"out\"' onclick='dropDown_click(".$id."_div);/*".$id."_text.focus();*/".$id."_buttons.style.display=\"none\";'>";
$strHTML .= "<div id='".$id."_div' style='z-index:4;display:none'>";
$strHTML .= " <table class='textBox' style='z-index:4'>";
foreach($arrCourses as $objCourse)
{
$strOpt++;
$strOnClick = $id."_text.value=this.value;";
$strOnClick .= $id."_div.style.display='none';";
$strOnClick .= "input_setValue(courseFullName,'".$objCourse->courseFullName."');";
$strOnClick .= "input_setValue(courseDescription,'".$objCourse->courseDescription."');";
$strOnClick .= $id."_text.focus();";
// $strOnClick .= $id.".submit();";
$strHTML .= " <tr><td id='".$id."_opt".$strOpt."' value='".$objCourse->courseName."' height='30' class=\"plain\" onmouseover=\"this.className='highlight'\" onmouseout=\"this.className='plain'\" onclick=\"".$strOnClick."\">".$objCourse->courseName."</td></tr>";
}
$strHTML .= " </table>";
$strHTML .= "</div>";
$strHTML .= "<span id='".$id."_buttons' style='position:absolute;display:none;cursor:pointer'><img src='/images/icons/arrow_forward.png' style='vertical-align:top'></span>";
$strHTML .= "</form>";
return $strHTML;
}
 
Upvote 0 Downvote
here's what I've made up ... this of course needs a bit of polishing, but at least will give you a good start:
Code: 
<html>
<head>
<script language="javascript">
function showDropDown()
{
	if (getIndexOf(document.getElementById("dropDown").options, document.getElementById("textBox").value) == -1)
	{
		document.getElementById("dropDown").options.add(new Option(document.getElementById("textBox").value, document.getElementById("dropDown").options.length));
		document.getElementById("dropDown").selectedIndex = getIndexOf(document.getElementById("dropDown").options, document.getElementById("textBox").value);
	}
	document.getElementById("dropDownSpan").style.display = 'block';
	document.getElementById("dropDownSpan").focus();
}

function getIndexOf(arr, what)
{
	for (i = 0; i < arr.length; i++)
		if (arr[i].text == what)
			return i;
	return -1;
}

function showTextBox()
{
	document.getElementById("textBox").value = document.getElementById("dropDown").options[document.getElementById("dropDown").selectedIndex].text;
	document.getElementById("dropDownSpan").style.display = 'none';
}
</script>
</head>
<body>
<span style="position: absolute; left: 90; top: 90; width: 170; height: 40" onMouseOver="showTextBox();"></span>
<span style="position:absolute; left: 100; top: 100; width: 150; z-index: 200; border: 1px solid black; height: 18;"><input type="text" id="textBox" style="width: 130; padding-left: 2px; border: 0px; height: 18px;" value="type here..."></span>
<span id="dropDownSpan" style="position:absolute; left: 100; top: 100; width: 150; z-index: 100; display: none;"><select id="dropDown" name="pizzasize" style="width: 150;" onMouseOut="showTextBox()" onChange="showTextBox()">
<OPTION VALUE="s">small
<OPTION VALUE="m">medium
<OPTION VALUE="l">large
</SELECT>
</span>
<span style="position:absolute; left: 232; top: 102; width: 15; height: 18; z-index: 200; background-color: #DDDDDD;" onMouseOver="showDropDown()"><font face="Marlett">u</font></span>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
938
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
834
malpa
malpa
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
363
penguinspeaks
penguinspeaks
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
425
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top