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()
            })
        })
    })