List Box Manipulation using jQuery

Working on listbox I assume that jquery is very simple to move data from one list box to another. Yes I implemented it.
Here I implemented on submit button and on double click on object. To implement this first include jquery to simple html page

<script type="text/javascript" src="jquery.js" charset="utf-8"></script>

Suppose you have two list boxes in an html table having some values and two button to move data from listbox first to another a list box and two buttons are like:

<select id="firstList" multiple="multiple" style="height:420px;width: 250px;" >
<option value="1">PHP</option>
<option value="2">.Net</option>
<option value="4">Paste</option>
<option value="5">Pea</option>
<option value="6">Pamp</option>
</select>
<input id="to2" type="button" name="to2"  title='assign' value=">" /><br/><br/>
<input id="to1" type="button" name="to1" title='unassign' value="<">
<select id="secondList" multiple="multiple" style="height:420px;width: 250px;" ></select>

All is the game of jquery functioning how we can obtained to move data from one list box to another.
Create two functions in assignList and unassignList like

// function: UnAssignment
function assignList()
{
// loop through first listbox and append to second listbox
$('#firstList :selected').each(function(i, selected){
// append to second list box
$('#secondList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');
// remove from first list box
$("#firstList option[value='"+ selected.value +"']").remove();
});
}
// function: UnAssignment
function unassignList()
{
// loop through second listbox and append to first listbox
$('#secondList :selected').each(function(i, selected){
// append to first list box
$('#firstList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');
// remove from second list box
$("#secondList option[value='"+ selected.value +"']").remove();
});
}

To make this functioning add jquery button and double click event to button and object itself.

$(document).ready(function(){
$('#firstList').dblclick(function() {
assignList();
});

$('#secondList').dblclick(function() {
unassignList();
 });

$('#to2').click(function()
{
assignList();
});

$('#to1').click(function()
{
unassignList();
});
 });

As we now one important thing to notice if list box is full of values and we have to search any particular value so it is difficult to search whole list box, for searching through list box take a text box and below how this function searchFirstList filter
No for this I have a textbox to filter
<input id=”firstFilterSearch” type=”text”>

// Function for Filtering
function searchFirstList(inputVal, searchArea)
{
var allCells = $(searchArea).find(‘option’);
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, option)
{
var regExp = new RegExp(inputVal, ‘i’);
if(regExp.test($(option).text()))
$(option).show();
else
$(option).hide();
});
}
}
[/javascript]

Calling this function


$('#firstFilterSearch').keyup(function()
{
var searchArea = $('#firstList'); // Select Box ID
searchFirstList($(this).val(), searchArea);
});

Here is example EXAMPLE