Demo: Selectable with Linking

Demos > Selectable with Linking

Select one of the items and try to type in the textfield

Source

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

$('#persons')
	.items([
		first:'Isaac', last:'Newton'},
		{first:'Johannes', last:'Keppler'},
		{first:'Alessandro', last:'Volta'},
		{first:'Blaise', last:'Pascal'}
	])
	.selectable({required:true})
	.chain();
			
$('#linker')
	.item('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()
			})
		})
	})