cb-fred/app.html

## app.html
<template>
  <require from='./element'></require>
  <element model.bind='model'></element>
</template>

## app.js
export class App {

}

## element.html
<template>
    <div>
        <input
        type='text'
        value.bind='input'
        focus.bind='hasFocus'>

        <div if.bind='!picked && hasFocusDelayed'>
            <template if.bind='results.length'>
                ${results.length}
                <template repeat.for='result of results'>
                    <div click.delegate='selectOption(result)'>
                        ${result}
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>

## element.js
import {inject, customElement, containerless, bindable, bindingMode} from 'aurelia-framework';
import {ObserverLocator} from 'aurelia-binding';

export function setArray(array, newarray) {
    array.splice(0, array.length);
    for (var i = 0; i < newarray.length; i++) {
        array.push(newarray[i]);
    }
}

@customElement('element')
@containerless()
@inject(ObserverLocator)
export class Autosearch {

    constructor(obsLoc, ...args) {
        this.input = '';
        this.results = [];
        this.obsLoc = obsLoc;
        this.picked = true;             // has the user picked his desired value ?
        this.hasFocus = false;          // raw input focus
        this.hasFocusDelayed = false;   // input focus with a delay before blur.

        this.model = {
            options: ['Foobar','Barfoo','HelloWorld'],
            selected: null
        }

        obsLoc.getObserver(this,'input')
            .subscribe(() => {
                this.makeResults();
            });

        obsLoc.getObserver(this,'hasFocus')
            .subscribe(() => {
                if (this.hasFocus) {
                    this.hasFocusDelayed = true;
                } else {
                    setTimeout(() => {
                        this.hasFocusDelayed = false;
                    },150);
                }
            });
    }

    attached() {
        this.input = this.model.selected || '';
    }

    makeResults() { // search input in options.
        if (this.input == this.model.selected) {
            return;
        }
        this.picked = false;
        var results = [];
        var pattern = this.input.toLowerCase();
        for (var option of this.model.options) {
            var value = option.toLowerCase();
            if (value.indexOf(pattern) >= 0) {
                results.push(option);
            }
        }
        setArray(this.results, results);
    }

    selectOption(value) {
        this.model.selected = value;
        this.input = value;
        this.picked = true;
        setArray(this.results, []); // FIXME Necessary to prevent a crash in aurelia templating. No idea why.
    }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<template>
	<require from='./element'></require>
	<element model.bind='model'></element>
	</template>
	<template>
	<div>
	<input
	type='text'
	value.bind='input'
	focus.bind='hasFocus'>

	<div if.bind='!picked && hasFocusDelayed'>
	<template if.bind='results.length'>
	${results.length}
	<template repeat.for='result of results'>
	<div click.delegate='selectOption(result)'>
	${result}
	</div>
	</template>
	</template>
	</div>
	</div>
	</template>
	import {inject, customElement, containerless, bindable, bindingMode} from 'aurelia-framework';
	import {ObserverLocator} from 'aurelia-binding';

	export function setArray(array, newarray) {
	array.splice(0, array.length);
	for (var i = 0; i < newarray.length; i++) {
	array.push(newarray[i]);
	}
	}

	@customElement('element')
	@containerless()
	@inject(ObserverLocator)
	export class Autosearch {

	constructor(obsLoc, ...args) {
	this.input = '';
	this.results = [];
	this.obsLoc = obsLoc;
	this.picked = true; // has the user picked his desired value ?
	this.hasFocus = false; // raw input focus
	this.hasFocusDelayed = false; // input focus with a delay before blur.

	this.model = {
	options: ['Foobar','Barfoo','HelloWorld'],
	selected: null
	}

	obsLoc.getObserver(this,'input')
	.subscribe(() => {
	this.makeResults();
	});

	obsLoc.getObserver(this,'hasFocus')
	.subscribe(() => {
	if (this.hasFocus) {
	this.hasFocusDelayed = true;
	} else {
	setTimeout(() => {
	this.hasFocusDelayed = false;
	},150);
	}
	});
	}

	attached() {
	this.input = this.model.selected \|\| '';
	}

	makeResults() { // search input in options.
	if (this.input == this.model.selected) {
	return;
	}
	this.picked = false;
	var results = [];
	var pattern = this.input.toLowerCase();
	for (var option of this.model.options) {
	var value = option.toLowerCase();
	if (value.indexOf(pattern) >= 0) {
	results.push(option);
	}
	}
	setArray(this.results, results);
	}

	selectOption(value) {
	this.model.selected = value;
	this.input = value;
	this.picked = true;
	setArray(this.results, []); // FIXME Necessary to prevent a crash in aurelia templating. No idea why.
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>