Поиск RadListBox с использованием JQuery - PullRequest
0 голосов
/ 23 августа 2011

Я пытаюсь найти RadListBox, содержащий более 150 элементов. Я заполняю RadListBox с помощью ICollection. У меня есть RadListBox и текстовое поле. У меня есть событие KeyUp () в текстовом поле, которое запускает приведенный ниже код при вводе критериев поиска, и я должен видеть все элементы в RadListBox, соответствующие критериям поиска. Ниже коэффициент отлично работает, если количество элементов в RadListBox невелико (<50). Производительность плохая как нет. количество элементов в RadListBox растет (> 100)

Можно ли как-нибудь оптимизировать критерии поиска? Кроме того, в настоящее время совпадающие элементы выбираются в 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;
                                }
            });
        });

Ответы [ 2 ]

0 голосов
/ 14 ноября 2017

Проверьте эту ссылку. RadListBox сортировка . Если эта ссылка недоступна. Это код.

Я прямо цитирую разработчика, который написал следующий код

Использование стрелок вверх и вниз: если пользователь использует стрелки вверх и вниз для перехода через отфильтрованный список, он может не работать, потому что вверх и Стрелка вниз потенциально может «останавливаться» на скрытых предметах.

Очистка фильтра после передачи: я решил очистить отфильтрованный список и фильтр после передачи. В противном случае, если пользователь передает элемент обратно, пока ваш список будет отфильтрован, вам нужно повторно фильтр. Кроме того, этот элемент может не соответствовать критериям фильтра и выглядеть исчезнуть пользователю.

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

}
0 голосов
/ 23 августа 2011

Вы можете определить переменную availableUserList вне обработчика события keyup, чтобы он не осуществлял поиск при каждом нажатии клавиши. Это определенно поможет улучшить производительность, так как вы говорите, что на странице может быть более 100 переключателей

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