Demo: Linking Multiple Items

Demos > Linking Multiple Items

Type e.g. isa in the textfield. The Umatched/hidden items will be displayed on the second list.

Source

<div>
	<input id="input-filter" type="value" />
</div>
<div id="persons">
	<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="filtered">
	<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>

$('#persons')
	.items([
		{first:'Isaac', last:'Newton'},
		{first:'Johannes', last:'Keppler'},
		{first:'Alessandro', last:'Volta'},
		{first:'Blaise', last:'Pascal'},
		{first:'Niels', last:'Bohr'},
		{first:'Albert', last:'Einstein'},
		{first:'Stephen', last:'Hawking'}
	])
	.chain();
			
$('#input-filter').keyup(function(){
	$('#persons').items('filter', $(this).val());
})

// Hidden means, that the hidden collection should be showed. 
// Other options would be 'all' and 'visible'
// Collections are user extensible
$('#filtered').items('link', '#persons', 'hidden').chain();