Demo: Multiple Selectable with Linking

Demos > Multiple Selectable with Linking

Click Shift+Click or Ctrl/Apple+Click to select multiple items. Try to edit the fields.

Source

<div id="persons">
	<div class="item"><span class="first">First</span> <span class="last">Last</span></div>
</div>
<div id="demo-linker">
	<div class="item">
		<input class="first" type="text" value="First" />
		<input class="last" type="text" value="Last" />
	</div>
</div>

$('#persons')
	.items([
		{first:'Isaac', last:'Newton'},
		{first:'Johannes', last:'Keppler'},
		{first:'Alessandro', last:'Volta'},
		{first:'Blaise', last:'Pascal'}
	])
	.selectable({required:true, multiple:true})
	.chain();

$('#linker')
	.items('link', '#persons', 'selected')
	.chain(function(){
		var self = this;
		this.find(':input').keyup(function(){
			self.item({
				first: self.find('.first').val(),
				last: self.find('.last').val()
			})
		})
	})