To run the project, just extract FilteredListBox.zip, expand the FilteredListBox folder and double-click on FilteredListBox.csproj. It should open in Visual Studio and then just run it. I've included the Telerik trial version dlls.
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadCodeBlock runat="server" >
<script type="text/javascript">
function filterList()
{
var listbox = $find("<%= rlbAvailable.ClientID %>");
var textbox = $find('<%= tbAvailableFilter.ClientID %>');
clearListEmphasis(listbox);
createMatchingList(listbox, textbox.get_textBoxValue());
}
// Remove emphasis from matching text in ListBox
function clearListEmphasis(listbox)
{
var re = new RegExp("</{0,1}em>", "gi");
var items = listbox.get_items();
var itemText;
items.forEach
(
function (item)
{
itemText = item.get_text();
item.set_text(itemText.replace(re, ""));
}
)
}
// Emphasize matching text in ListBox and hide non-matching items
function createMatchingList(listbox, filterText)
{
if (filterText != "")
{
filterText = escapeRegExCharacters(filterText);
var items = listbox.get_items();
var re = new RegExp(filterText, "i");
items.forEach
(
function (item)
{
var itemText = item.get_text();
if (itemText.match(re))
{
item.set_text(itemText.replace(re, "<em>" + itemText.match(re) + "</em>"));
item.set_visible(true);
}
else
{
item.set_visible(false);
}
}
)
}
else
{
var items = listbox.get_items();
items.forEach
(
function (item)
{
item.set_visible(true);
}
)
}
}
function rlbAvailable_OnClientTransferring(sender, eventArgs)
{
// Transferred items retain the emphasized text, so it needs to be cleared.
clearListEmphasis(sender);
// Clear the list. Optional, but prevents follow up situation.
clearFilterText();
createMatchingList(sender, "");
}
function rbtnClear_OnClientClicking(sender, eventArgs)
{
clearFilterText();
var listbox = $find("<%= rlbAvailable.ClientID %>");
clearListEmphasis(listbox);
createMatchingList(listbox, "");
}
// Clears the text from the filter.
function clearFilterText()
{
var textbox = $find('<%= tbAvailableFilter.ClientID %>');
textbox.clear();
}
// Escapes RegEx character classes and shorthand characters
function escapeRegExCharacters(text)
{
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
</script>
</telerik:RadCodeBlock>
<div style="margin-bottom: 10px;">
<telerik:RadButton ID="btnSave" runat="server"
Text="Save"
onclick="btnSave_Click">
<Icon PrimaryIconCssClass="rbSave" />
</telerik:RadButton>
</div>
<div class="listBoxHeaders">
<span style="margin-left:50px;">
Available States
</span>
<span style="margin-left:136px;">
Chosen States
</span>
</div>
<div>
<table style="position:relative;left:-3px;margin-bottom:2px;">
<tr>
<td>
<telerik:RadTextBox ID="tbAvailableFilter" runat="server"
Width="187px"
EmptyMessage="Search States..."
autocomplete="off"
onkeyup="filterList();" />
</td>
<td>
<telerik:RadButton ID="rbtnClear" runat="server"
Width="22px"
AutoPostBack="false"
OnClientClicking="rbtnClear_OnClientClicking">
<Icon PrimaryIconCssClass="rbClear" />
</telerik:RadButton>
</td>
</tr>
</table>
</div>
<telerik:RadListBox ID="rlbAvailable" runat="server"
Height="250px"
Width="250px"
AllowTransfer="true"
AllowTransferOnDoubleClick="true"
TransferToID="rlbChosen"
EnableDragAndDrop="true"
OnClientTransferring="rlbAvailable_OnClientTransferring"
ButtonSettings-ShowTransferAll="false"/>
<telerik:RadListBox ID="rlbChosen" runat="server"
Height="250px"
Width="250px"
EnableDragAndDrop="true"
AllowReorder="true"/>
<br /><br />
<strong>States I've Lived In:</strong>
<asp:Repeater ID="rptStates" runat="server">
<ItemTemplate>
<div><%# Eval("Text") %></div>
</ItemTemplate>
</asp:Repeater>