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

}