Question

我正在尝试搜索包含超过150个项目的RadListBox。我使用ICollection填充RadListBox。我有一个RadListBox和一个文本框。我在文本框上有一个KeyUp（）事件，它在输入搜索条件时触发下面的代码，我应该能够看到RadListBox中与搜索条件匹配的所有项目。如果RadListBox中的项目数量小（<50），则下面的系数工作正常。性能不好，因为没有。 RadListBox中的项目增长（＆gt; 100）

无论如何我可以优化搜索条件吗？此外，currentlly，匹配的项目在RadListbOX中选择，但我希望只有匹配的项目显示在RadListBox中，其他项目将被隐藏。是否有可能使用JQuery？请指教。我很感激任何代码编写。谢谢！

 $(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;
                                }
            });
        });

Answer 1

您可以在keyup事件处理程序之外定义availableUserList变量，这样它就不会在时间点上搜索密钥。这肯定有助于提高性能，因为您说页面上可以有超过100个单选按钮

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

Answer 2

检查此链接。 RadListBox sorting。如果该链接不可用。这是代码。

我直接引用编写以下代码的开发人员

向上和向下箭头用法：如果用户使用向上和向下箭头去   通过筛选列表，它似乎不起作用因为up和   向下箭头可能会停止＆＃34;停止＆＃34;关于隐藏物品。

转移后清除过滤器：我选择清除过滤后的内容   传输后的列表和过滤器。否则，如果是用户   在您的列表框被过滤后将项目转回，您需要   再过滤。此外，该项目可能与筛选条件不匹配似乎   消失给用户。

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();
    }

}

使用JQuery搜索RadListBox

2 个答案: