Filterable_Sortable_MultiSelect_js_linked.py

import panel as pn
pn.extension()

labels = [t[0] + t[1] + t[2] for t in zip('abcdefghijklmnopqrstuvwxyz','bcdefghijklmnopqrstuvwxyza', 'cdefghijklmnopqrstuvwxyzab')]
options = dict(zip(labels, range(len(labels))))

multi = pn.widgets.MultiSelect(options=options)
sort = pn.widgets.Button(name='▼', width=40)
filt = pn.widgets.AutocompleteInput(options=list(options.keys()), placeholder='Filter')

sort.jslink(multi, code={'clicks': """
source.label = source.clicks % 2 ? '▼' : '▲';
target.options = source.clicks % 2 ? target.options.sort() : target.options.reverse();
console.log(target.options[0]);
console.log(source.clicks);
"""})

filt.jslink(multi, code={'value': """
target.value = target.options.filter(label => label.includes(source.value));
console.log(target.value);
"""})

result = pn.pane.Str('')
multi.link(result, value='object')

pn.Column(pn.Row(sort, filt, margin=0), multi, result)