Append text to input after selecting one from list - ractivejs

Question

<input type="submit" on-click='toggle("Dropdown")'>
<input type="text" value="{{category.name}}">
{{#if Dropdown}}
<div class="dropdown">
<ul>
<li>Custard Pudding</li>
<li>Coffee Pudding</li>
</ul>
{{/if}}
ractive.on('select', function(event) {
this.observe( 'category.name', function ( newValue, keypath ) {
this.set( keypath, '' + newValue );
});
})
Understand that in JQuery $('dropdown a').text() and append it to input would work.
Only question I have is how to grab the text and set it to input when on-click "select". Searched example and tried but it is not doing anything. Perhaps the way is wrong.
Please help

Answer 1

You can get the value from event.node:
ractive.on('select', function(event) {
this.set( 'category.name', '' + event.node.textContent );
})
You could do that inline too:
<li>Custard Pudding</li>
But if the <li> are generated from data (or you could make it that way) you can set directly
<input type="submit" on-click='toggle("Dropdown")'>
<input type="text" value="{{category.name}}">
{{#if Dropdown}}
<div class="dropdown">
<ul>
{{#each ['Custard Pudding', 'Coffee Pudding'] }}
<li>{{this}}</li>
{{/each}}
</ul>
{{/if}}