Click here to Skip to main content
Click here to Skip to main content

Checkbox List With Filtering jQuery Widget

, 18 Sep 2012
Rate this:
Please Sign up or sign in to vote.
A checkbox list jQuery UI widget with real time filtering functionality explained

Introduction

We used checkbox-list controls back at the good old days for desktop applications. This is a lightweight implementation of checkbox list control as a jQuery UI widget.

Background

First of all, we need to populate the listbox with data. I used a hard-coded JSON data model. Each item has a text property and a value property.

var dataModel = [
      {text: 'checkbox-1 caption', value:'1'}
]; 

And selection data returned within the same data model.

Using the Code

checkList widget can be applied easily with a div element. 

<div id='myCheckList'></div> 
$('myCheckList').checkList({
      listItems: dataModel,
      onChange: selChange
});   

We can set the listbox items on creation by passing the listItems parameter or after widget created set data model manually by calling setData method. Also as you see, we have an onChange event. Event is fired whenever any item's check state is changed. In the demo application, I used this event to display the selected elements.

We can simply get the selected elements by calling getSelection method. This returns the same data model we use to set the listbox items.

function selChange(){ 
      var selection = $('#myCheckList').checkList('getSelection'); 
      $('#selectedItems').text(JSON.stringify(selection)); 
}     

Filtering

Filtering capability is implemented without any Ajax calls. It's simple, we check every listitem in the listbox if it contains the filter string. Then we show the matched items and hide the unmatched ones. While showing and hiding listbox items, we can apply some jQuery effects. The default effect is defined as blink in the options.

Have fun.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Evren Yortuçboylu
Software Developer (Senior)
Turkey Turkey
No Biography provided
Follow on   Twitter

Comments and Discussions

 
QuestionDeselect All not working PinmemberAbhinav Bishnoi4-Aug-14 20:14 
QuestionHow to convert ASP's checkboxlist in this? PinmemberMember 1061999923-Feb-14 22:49 
QuestionHow can I make its use as multiple columns? PinmemberMember 1061999923-Feb-14 19:58 
GeneralHow to add items from web service mathod in jquery var items=[ ] PinmemberMember 1058395412-Feb-14 0:55 
BugBug on chrome Pinmemberreminus1-May-13 1:28 
QuestionselChange event fires for each item in the list Pinmemberdunwan17-Oct-12 7:18 
AnswerRe: selChange event fires for each item in the list Pinmemberholmm12-Nov-12 1:01 
AnswerRe: selChange event fires for each item in the list PinmemberSXP22-Nov-12 21:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 18 Sep 2012
Article Copyright 2012 by Evren Yortuçboylu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid