Search the RadListBox using JQuery

I am trying to search the RadListBox containing more than 150 items. I am populating the RadListBox with an ICollection. I have a RadListBox and a textbox. I have a KeyUp() event on the textbox which fires the below code upon entering the search criteria and I should be able to see all the items in the RadListBox matching the search criteria. Below coe works fine if the number of items in the RadListBox is small (< 50). Performance is bad as the no. items i nthe RadListBox grows (>100)

Is there anyway I could optimize the search criteria? Also, currentlly, the matched items are selected in the RadListbOX, But I want the only the matched items to show up in the RadListBox and the rest of the items to be hidden. is it possible using the JQuery? Please advise. I appreciate any sample codeing on this. Thanks!

 $(document).ready(function () {
            $('#ctl00_ContentMain_txtLearnersNotInGrp_text').keyup(function () {
                var item;
                var search;
                var availableUserList 
                availableUserList = $find("<%= AvailableUsers.ClientID %>"); //Get RadList

                search = $(this).val(); //get textBox value



                                if (search.length > 3) {
                                    for (var i = 0; i < availableUserList ._children.get_count(); i++) {
                                        if (availableUserList .getItem(i).get_text().toLowerCase().match(search.toLowerCase())) {
                                            availableUserList .getItem(i).select();

                                        }
                                        else {
                                            availableUserList .getItem(i).unselect();
                                        }
                                    }
                                }
                                else {
                                    availableUserList .clearSelection();开发者_开发技巧
                                    availableUserList .selectedIndex = -1;
                                }
            });
        });

You can define availableUserList variable outside the keyup event handler, that way it will not search evertime the key is hit. This will definitely help improve the performance as you say there can be more than 100 radio buttons on the page

$(document).ready(function () {
    var availableUserList = $find("<%= AvailableUsers.ClientID %>");
    $('#ctl00_ContentMain_txtLearnersNotInGrp_text').keyup(function () {
            ...
            ...
    });
});

Check this link out. RadListBox sorting. If that link is unavailable. This is the code.

I am directly quoting the developer who wrote the following code

Up and Down Arrow Usage: If the user uses the up and down arrows to go through a filtered list, it may appear to not work because the up and down arrow will potentially be "stopping" on hidden items.

Clearing the Filter after a Transfer: I opted to clear the filtered list and the filter after a transfer is made. Otherwise, if the user transfers the item back while your listbox is filtered, you'll need to re-filter. Also, that item may not match the filter criteria and seem to disappear to the user.

body
{
    font-family: Trebuchet MS, Sans-Serif;
}

.listBoxHeaders
{
    color:Green;
    font-weight:bold;
}

.RadListBox span.rlbText em
{
    background-color: #E5E5E5;
    font-weight: bold;
    font-style: normal;
}

.rbClear
{
    background-image: url(images/clear.png);
    background-position: center;
    background-repeat: no-repeat;
}


ASP.NET Markup:
<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>

C#
using System;

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            rlbAvailable.LoadContentFile("states.xml");
        }
    }

    protected void btnSave_Click(object sender, EventArgs e)
    {
        rptStates.DataSource = rlbChosen.Items;
        rptStates.DataBind();
    }

}