Hi,
Based on my understanding, you want to achieve a DropDownList like Combobox control in winform. With ListSearch, it's not available to get that. As far as I know, never easy way can achieve it. We have to made a new DropDownList by ourselves.
The below sample is implemented by using JavaScript. In the codes, the dropdown control is created by JavaScript and it's not associated with the DropDownList in ASP.Net.
The dropdown control contains HTML textbox and div which contains every item of dropdown. When you press key, it will check the item matching in the dropdownlist.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropDownList_ListSearch.aspx.cs" Inherits="js_webform_DropDownList_ListSearch" %>
<HTML>
<HEAD>
<title>DropDownList_ListSearch</title>
<meta http-equiv="Content-Type" content="text/html; ">
<style>BODY {
FONT: 12px
}
TD {
FONT: 12px
}
DIV {
FONT: 12px
}
LABEL {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px
}
.link_box {
CURSOR: default; TEXT-ALIGN: left
}
.link_head {
BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%;
BORDER-BOTTOM: 2px inset; HEIGHT: 23px
}
.link_text {
PADDING-LEFT: 2px; BACKGROUND: #fff
}
.link_arrow0 {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface;
FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px;
BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_arrow1 {
BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px;
BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px;
BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett;
BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px;
BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_value {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0);
VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid; POSITION: absolute
}
.link_record0 {
BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff;
WIDTH: 100%; COLOR: #000; HEIGHT: 20px
}
.link_record1 {
BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058;
WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px
}
</style>
<script>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//select box fade in
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//select box fade out
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//highlight place
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//replace with the selected item
document.all.text1.value=el.innerText
}
document.onclick=dropdownHide
function listsearch()//this code can achieve your prupose
{
if(dropShow){
}else{
currentID=value1
value1.style.visibility="visible"
dropFadeIn()
}
var word=document.all.text1.value;
var l;
var childsnum=value1.childNodes.length;
for(l=0;l<childsnum;l++)
{
var s=value1.childNodes[l].innerText; if(s.substring(0,word.length)==word)
hiLight(value1.childNodes[l]);
}
}
</script>
</HEAD>
<body text="#000000" >
<div style="padding:10px;border-bottom:2px solid red">DropDownList</div>
<form id="form1" onsubmit="alert(text1.value)" runat="server">
<table>
<tr>
<td>
<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
<div class="link_head" onclick="dropdown(value1)">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td>
<div class="link_text"><nobr><input id="text1" type="text" onkeyup="listsearch()"></input></nobr></div>
</td>
<td align="right" width="22">
<div onmouseup="this.className='link_arrow0'" class="link_arrow0"
onmousedown="this.className='link_arrow1'" onkeypress="this.className='link_arrow0'">6</div>
</td>
</tr>
</table>
</div>
<div class="link_value" id="value1" style="WIDTH: 500px; HEIGHT: 300px">
<div class="link_record0" onmouseover="hiLight(this)"
onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>achor</label></div>
<div class="link_record0" onmouseover="hiLight(this)"
onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>bea</label></div>
<div class="link_record0" onmouseover="hiLight(this)"
onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>free</label></div>
<div class="link_record0" onmouseover="hiLight(this)"
onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>kop</label></div>
<div class="link_record0" onmouseover="hiLight(this)"
onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>luuij</label></div>
<div class="link_record0" onmouseover="hiLight(this)"
onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>luui</label></div>
</div>
</div>
</td>
<td><input type="hidden" value="Please Select" name="city"> <input type="submit" value="ok">
</td>
</tr>
</table>
</form>
</body>
</HTML>
The items in the dropdownlist are created via div. If you want to created them dynamically at Code Behind, you can add the div items by
ScriptManager.RegisterStartupScript(Page, this.GetType(), "adddivchild", "value1.appendChild(new div);", true);
And put the new div( the new div should be like the HTML code as below) with item text into it.
<div class="link_record0" onmouseover="hiLight(this)"
onclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>your text</label></div>
You can check this link to know about how to add a div into aspx page: http://www.thescripts.com/forum/thread652896.html
To get the text in HTML textbox in Code Behind, you have to use a hidden control to pass the value from JavaScript to Code Behind.
About this: http://forums.asp.net/t/1211504.aspx