Client-Side filtering of a RadListBox for ASP.NET AJAX with jQuery

The well known “Write Less, Do More, JavaScript Library” can easily help you filter options of select tag. Problem is, that Telerik’s control produces a different set of tags as your drop down list:

<div id="rdSchem" class="RadListBox RadListBox_Default RadListBoxScrollable">
	<div class="rlbGroup rlbGroupRight">
		<ul class="rlbList">
			<li id="rdSchem_i0" class="rlbItem">
				<input type="checkbox" class="rlbCheck">
				<span class="rlbText">Option 1</span>
			</li>
			<li id="rdSchem_i1" class="rlbItem">
				<input type="checkbox" class="rlbCheck">
				<span class="rlbText">Option 2</span>
			</li>			
		</ul>
	</div>
	<input id="rdSchem_ClientState" name="rdSchem_ClientState" type="hidden" autocomplete="off" value="{&quot;isEnabled&quot;:true,&quot;logEntries&quot;:[],&quot;selectedIndices&quot;:[],&quot;checkedIndices&quot;:[],&quot;scrollPosition&quot;:0}">
</div>

So you need a little more work to make a real-time filtering…
Step 1
Add an input for the user to write keywords:

Filter:<input type="text" id="filterTags" value="">

Step 2
Add your control:

<telerik:RadListBox runat="server" ID="rdSchem"  Height="350px" Width="300px" SelectionMode="Multiple" CheckBoxes="true" AllowReorder="False">
</telerik:RadListBox>

Step 3
Add the following JS:

<script>
$(document).ready(function () {//Wait for the DOM
    $("#filterTags").bind('change keyup', function () {
        var search = $.trim($(this).val());
        var regex = new RegExp(search, "gi");

        $(".rlbItem").each(function (i) {
           var text = $.trim($(this).find(".rlbText").html());
           if (text.match(regex) !== null)
               $(this).show();
           else
               $(this).hide();
        });
    });
});
</script>

And that’s it!

P.S.
Just for the record, handling options of a select tag with jQuery is similarly easy:

<script>
jQuery.fn.filterSelectByText = function(textbox) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);

        $(textbox).bind('change keyup', function() {
            var options = $(select).empty().data('options');
            var search = $.trim($(this).val());
            var regex = new RegExp(search,"gi");

            $.each(options, function(i) {
                var option = options[i];
                if(option.text.match(regex) !== null) {
                    $(select).append(
                        $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });
    });
};
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s