highlight the searched text in RadListBox and move checked items in to top of the list

JS

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript" language="javascript">
        function onChangeFilterByName(g, text) {
            var f = $find("<%= RadListBox1.ClientID %>");
            if (f._enableMarkMatches && ($telerik.isIE || $telerik.isChrome)) {
                var h = g.keyCode == Sys.UI.Key.backspace || g.keyCode == Sys.UI.Key.esc || g.keyCode == Sys.UI.Key.space || g.keyCode == Sys.UI.Key.down || g.keyCode == Sys.UI.Key.up;
                if (h) {
                    var j = f._onKeyPress(g);
                    g.preventDefault();
                    if (j) { return; }
                }
            }
            f._onKeyDown(g);
            f._onKeyPress(g);
        }
        function onChangeFilterByName1(txtFilterByName) {
            var check = 0;
            var listbox = $find("<%= RadListBox1.ClientID %>");
            var items = listbox.get_items();
            var itemContainsSearchText = new Array();
            var index = 0;
            {
                for (var i = 0; i <= items.get_count() - 1; i++) {
                    var item = items.getItem(i);
                    if (!item.get_checked() && item.get_text().toLowerCase().startsWith(txtFilterByName.value.toLowerCase())) {
                        item.scrollIntoView();
                        item.ensureVisible();
                        var text = item.get_text();
                        var replace = String.format("<span class=\"rlbHighlight\">{0}</span>", text);
                        item.set_text(replace);
                        //break;
                    }
                }
            }
        }

        function OnClientItemCheckedHandler(sender, eventArgs) {
            var item = eventArgs.get_item();
            var checkedItem = sender.get_checkedItems();
            checkedItem.sort(sortAscByText);
            var allItems = sender.get_items().toArray();
            for (var i = 0; i < checkedItem.length; i++) {
                sender.reorderItem(checkedItem[i], i);
            }

            if (!item.get_checked()) {
                //removed checked items
                for (var i = 0; i < checkedItem.length; i++) {
                    var index = allItems.indexOf(checkedItem[i]);
                    allItems.splice(index, 1);
                }
                //reorder uncheck items.
                allItems.sort(sortAscByText);
                var index = checkedItem.length;
                for (var i = 0; i < allItems.length; i++) {
                    sender.reorderItem(allItems[i], index);
                    index = index + 1;
                }
            }
        }

        function sortAscByText(a, b) {
            return a.get_text() == b.get_text() ? 0 : a.get_text() < b.get_text() ? -1 : 1
        }
    </script>
</telerik:RadCodeBlock>

ASPX

<div>
        <asp:TextBox ID="txtSort" runat="server" Width="195px" OnKeyUp="onChangeFilterByName(event,this)"></asp:TextBox><br />
        <br />
        <telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true" Width="200px"
            Height="200px" SelectionMode="Multiple" TabIndex="1" EnableMarkMatches="true"
            OnClientItemChecked="OnClientItemCheckedHandler">
            <Items>
                <telerik:RadListBoxItem Text="Argentina" Value="1"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Australia" Value="2"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Brazil" Value="3"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Canada" Value="4"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Chile" Value="5"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="China" Value="6"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Egypt" Value="7"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="England" Value="8"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="France" Value="9"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Germany" Value="10"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="India" Value="11"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Indonesia" Value="12"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Kenya" Value="13"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Mexico" Value="14"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="New Zealand" Value="15"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="South Africa" Value="16"></telerik:RadListBoxItem>
            </Items>
        </telerik:RadListBox>
    </div>

Output of this code:


This code is contributed form Abidali Suthar [one of the developer in my team].