Aurelia Semantic dropdown

Question

I am trying to use a combo box in Aurelia so that my users can type in a drop down and search the contents. I was trying to incorporate the one that Semantic had created, but when I call dropdown on the element it doesn't run the code, so it stays a normal dropdown. Like the state example here

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

What's the best way to go about doing this, has anyone done this yet, or can think of a good way to implement this functionality?

Answer 1

First of all, install 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 dependency. After that you will be able to import SemantinUI's jQuery plugins and styles into your view-model. View-model can be something like this then:

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 render template with states list:

<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>

Couple of notes. You need to provide ref attribute to reference HTMLElement from view-model, this way you don't have to hardcode CSS selectors into VM.

Also looks like Aurelia doesn't pick up proper value automatically after custom Semantic dropdown changes selection. In this case you can simply update model manually with onchange event.

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