使用JQuery搜索RadListBox

Question

我想搜索包含超过150项的RadListBox。我正在用ICollection填充RadListBox。我有一个RadListBox和一个文本框。我在输入搜索条件时触发下面的代码的文本框上有一个KeyUp（）事件，我应该能够看到RadListBox中与搜索条件匹配的所有项目。 如果RadListBox中的项目数量很小（< 50），则在coe下工作正常。性能不好，因为没有。物品在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; 
           } 
      }); 
     }); 

Answer 1

您可以定义keyup事件处理程序之外availableUserList变量，这样evertime关键是打它不会搜索。这肯定会有助于提高性能，因为您说网页上可能有100多个单选按钮

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

Answer 2

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

我直接引用谁写了下面的代码的开发

向上和向下箭头用法：如果用户使用的向上和向下箭头通过过滤列表去 ，它可能会出现无法正常工作因为向上箭头和向下箭头可能会“隐藏”在隐藏物品上。

传送后清除过滤器：我选择在传送完成后清除已过滤的 列表和过滤器。否则，如果用户 在您的列表框被过滤的同时将项目传回，则需要重新筛选 。此外，该项目可能不符合过滤标准，并且似乎 消失给用户。

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

}