Aurelia Semantic Dropdown Menu

Question

I am trying to use the combo box in Aurelia so that my users can enter a drop-down list and search for content. I tried to include the one that Semantic created, but when I call dropdown on the element, it does not run the code, so it remains a normal drop-down list. As an example of the state here

http://semantic-ui.com/modules/dropdown.html

What is the best way to do this, has anyone else done this, or can come up with a good way to implement this functionality?

Answer 1

First of all, install the SemanticUI package. With JSPM, run this line to install it from Github:

jspm install semantic-ui=github:Semantic-Org/Semantic-UI 

It will also install jQuery as a dependency. After that, you can import the plugins and styles of SemanticUI jQuery into your view model. The view model might be something like this:

 import {semanticUI} from 'semantic-ui'; import states from './states-list'; export class States { constructor() { this.states = states; // or load states with http-client, etc. } attached() { $(this.statesSelect).dropdown().on('change', e => { this.stateSelected = e.target.value; }); } } 

and then you can display the state list template:

 <template> <p>Selected: ${stateSelected}</p> <select ref="statesSelect" value.bind="stateSelected" class="ui search dropdown"> <option value="">State</option> <option value="${state.code}" model.bind="state.name" repeat.for="state of states">${state.name}</option> </select> </template> 

A few notes. You need to provide the ref attribute to reference the HTMLElement from the view model, so you don't need to hardcode the CSS selector in the VM.

It also looks like Aurelia does not automatically get the correct value after selecting custom semantic drop-down lists. In this case, you can simply update the model manually using the onchange event.

Demo: http://plnkr.co/edit/vJcR7n?p=preview