app.html

<template>
  <div style="width:200px;">
  <require from="aurelia-kendoui-bridge/autocomplete/autocomplete"></require>
<ak-autocomplete k-data-source.bind="items" k-value.two-way="selectedValue">
  <input style="width: 100%;">
</ak-autocomplete>
<p class="demo-hint" style="word-break: break-all">Type a name, available values in the list are: ${ items } </p>

<br />Selected Value:
<input type="text" value.bind="selectedValue">
<p>${selectedValue}</p>

<table>
  <th>
    <td></td><td><input type="checkbox" click.trigger="toggleAllSelected()" checked.two-way="allSelected"></td>
  </th>
<tr repeat.for="option of options">
 <td>${option.name}</td><td><input type="checkbox" disabled.bind="option.disabled" checked.two-way="option.selected"></td>
</tr>
</table>

</div>
<span>${selectionRegEx}</span>
</template>

app.ts

import * as $ from 'jquery';
import 'kendo/js/kendo.autocomplete';
import { OptionContainer } from './itemContainer';

export class App {
  allSelected: boolean = false;
  selectedValue: string = "Charles";
  items = [
    'Charles',
    'Jedd',
    'Nikolaj',
    'Jeroen',
    'David',
    'Rob',
    'Matt',
    'Patrick',
    'Jason',
    'Martin',
    'Fredrick',
    'Alex'
  ]

  options: OptionContainer[] = [];

  constructor() {
    this.getAvailableOptions();

  }

  getAvailableOptions() {
    // This will be a web call to get the set

    for (var i = 0; i < 30; i++) {
      let opt = new OptionContainer();
      opt.name = "Item " + i;
      this.options.push(opt);
    }

  }

  toggleAllSelected()
  {
    if(this.allSelected)
    {
      this.deselectAll();
    }
    else{
      this.selectAll();
    }
  }

  selectAll() {
    this.options.forEach((opt) => opt.selected = true);
  }

  deselectAll() {
    this.options.forEach((opt) => opt.selected = false);
  }

  get selectionRegEx() {
    let selected = this.options.filter((opt) => {
      return opt.selected === true;
    });

    let deselected = this.options.filter((opt) => {

      return opt.selected === false;
    });

    if (selected.length === this.options.length) {
       this.allSelected = true;
      return '.*';    
    }
    else if (deselected.length == this.options.length) {
      this.allSelected = false;
       return '^()$';
    } else if (selected.length < deselected.length) {
       this.allSelected = false;
      return '^(' + selected.map(opt => opt.name + '$').join('|') + ')';
    }
    else {
       this.allSelected = false;
      return '^(?!' + deselected.map(opt => opt.name + '$').join('|') + ').*';
    }
  }
}

main.ts

import { Aurelia } from 'aurelia-framework'
import environment from './environment';


//Configure Bluebird Promises.
(<any>Promise).config({
  longStackTraces: environment.debug,
  warnings: {
    wForgottenReturn: false
  }
});

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('aurelia-kendoui-bridge');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  aurelia.start().then(() => aurelia.setRoot());
}