User564383478 posted
Hi All,
In the below dropdown list, Is it possible to search the items without text box? I need to enter the letters in the dropdown list itself.How it possible to do so?
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type = "text/javascript">
var ddlText, ddlValue, ddl, lblMesg;
function CacheItems() {
ddlText = new Array();
ddlValue = new Array();
ddl = document.getElementById("<%=ddlItems.ClientID %>");
lblMesg = document.getElementById("<%=lblMessage.ClientID%>");
for (var i = 0; i < ddl.options.length; i++) {
ddlText[ddlText.length] = ddl.options[i].text;
ddlValue[ddlValue.length] = ddl.options[i].value;
}
}
window.onload = CacheItems;
function FilterItems(value) {
ddl.options.length = 0;
for (var i = 0; i < ddlText.length; i++) {
if (ddlText[i].toLowerCase().indexOf(value) != -1) {
AddItem(ddlText[i], ddlValue[i]);
}
}
lblMesg.innerHTML = ddl.options.length + " item(s) found.";
if (ddl.options.length == 0) {
AddItem("No item found.", "");
}
}
function AddItem(text, value) {
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
ddl.options.add(opt);
}
</script>
<style type = "text/css">
body
{
font-family:Arial;
font-size:10pt
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server"
onkeyup = "FilterItems(this.value)"></asp:TextBox><br />
<asp:DropDownList ID="ddlItems" runat="server" >
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Orange" Value="2"></asp:ListItem>
<asp:ListItem Text="Apple" Value="3"></asp:ListItem>
<asp:ListItem Text="Banana" Value="4"></asp:ListItem>
<asp:ListItem Text="Water Melon" Value="5"></asp:ListItem>
<asp:ListItem Text="Lemon" Value="6"></asp:ListItem>
<asp:ListItem Text="Pineapple" Value="7"></asp:ListItem>
<asp:ListItem Text="Papaya" Value="8"></asp:ListItem>
<asp:ListItem Text="Chickoo" Value="9"></asp:ListItem>
<asp:ListItem Text="Apricot" Value="10"></asp:ListItem>
<asp:ListItem Text="Grapes" Value="11"></asp:ListItem>
<asp:ListItem Text="Olive" Value="12"></asp:ListItem>
<asp:ListItem Text="Guava" Value="13"></asp:ListItem>
<asp:ListItem Text="Sweet Lime" Value="14"></asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
