This example shows how to select ListItems in the ListBox based from the TextBox values using JavaScript.
Its only select the first letter in list box control .If you want to filtering check this Filtering Listbox control using Javascript.
Here’s the code block below.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Demo</title>
</head>
<script type="text/javascript" language="javascript">
function SearchList()
{
var l = document.getElementById('<%= ListBox1.ClientID %>');
var tb = document.getElementById('<%= TextBox1.ClientID %>');
if(tb.value == "")
{
ClearSelection(l);
}
else{
for (var i=0; i < l.options.length; i++)
{
if (l.options[i].text.toLowerCase().match(tb.value.toLowerCase()))
{
l.options[i].selected = true;
return false;
}
else
{
ClearSelection(l);
}
}
}
}
function ClearSelection(lb)
{
lb.selectedIndex = -1;
}
</script>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" onkeyup="return SearchList();"/><br />
<asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="250px">
<asp:ListItem>Vincent</asp:ListItem>
<asp:ListItem>Jennifer</asp:ListItem>
<asp:ListItem>Shynne</asp:ListItem>
<asp:ListItem>Christian</asp:ListItem>
<asp:ListItem>Helen</asp:ListItem>
<asp:ListItem>Vladi</asp:ListItem>
<asp:ListItem>Bee</asp:ListItem>
<asp:ListItem>Jerome</asp:ListItem>
<asp:ListItem>Vinz</asp:ListItem>
<asp:ListItem>Churchill</asp:ListItem>
<asp:ListItem>Rod</asp:ListItem>
<asp:ListItem>Mark</asp:ListItem>
</asp:ListBox>
</form>
</body>
</html>
The JavaScript function basically searches the ListBox items and find the items based from the value of the TextBox that was entered. If a keyword exist from the list then it will automatically select the ListItems in the ListBox, but if the keyword does not exist then it will clear the ListBox selection.
See the output below when you run it on the page
I have worked on no of technologies including C# .Net, VB .Net, ASP.Net, LINQ, WCF, X++, and SharePoint,Oracle,Crystal Reports.
Subscribe to:
Post Comments (Atom)
PDF Arabic watermark using MVC and iTextSharp
PDF full page Arabic watermark using MVC and iTextSharp Download : Source Code Most of the time we have requirement to gen...
-
Technorati Tags: Create Dynamic Connection with Crystal Report using Asp.net and Oracle Stored Procedure Dynamic crystal report connection...
-
Cookieless Session State Asp.net ASP.NET Session State by default uses a cookie to store session ID. Session ID is a unique string, used t...
-
Flickr Tags: Custom Sorting , Custom Paging , Dynamic Sorting , Dynamic Paging , Paging Control Compared to default paging, custom pagin...
No comments:
Post a Comment