dagtveit/index.html

## index.html
<!doctype html>
<html>

<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
	<div aurelia-app="src/configure">
		Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script>
	<script>
		System.import("aurelia-bootstrapper");
	</script>
</body>

</html>

## src\app.html
<template>
	<div>
		<md-lookup value.bind="value" options-function.bind="optionsFunction" display-field-name.bind="getDisplayName" label="pick an option">
			<template replace-part="option-template">
				<span style="color: blue">${option.id}</span> -
				<span>${option.name}</span>
			</template>
			<template replace-part="searching-template">
				Wait for 1 sec...
			</template>
			<template replace-part="no-matches-template">
				Didn't find anything
			</template>
		</md-lookup>
		You picked: ${value | stringify}
	</div>
</template>

## src\app.ts
import { observable } from "aurelia-binding";
import { ILookupOptionsFunctionParameter } from "aurelia-materialize-bridge";

interface ICompany {
	id: number;
	name: string;
}

export class App {

	companies: ICompany[] = [{ id: 1, name: "Microsoft" }, { id: 2, name: "Google" }, { id: 3, name: "Apple" }];

	value: ICompany = this.companies[0];

	optionsFunction(p: ILookupOptionsFunctionParameter<ICompany>): Promise<ICompany[]> {
		if (p.value) {
			return Promise.resolve([p.value]);
		}
		else {
			return this.searchCompanies(p.filter);
		}
	}

	searchCompanies(filter: string): Promise<any[]> {
		return new Promise<any[]>((resolve, reject) => {
			setTimeout(() => resolve(this.companies.filter(x => x.name.includes(filter) || x.id.toString().includes(filter))), 1000);
		});
	}

	setValue() {
		this.value = this.companies[2];
	}

	getDisplayName(x: ICompany){
		return `${x.name} (id=${x.id})`;
	}
}

// tslint:disable-next-line:max-classes-per-file
export class StringifyValueConverter {
	toView(value) {
		return JSON.stringify(value);
	}
}

## src\configure.ts
export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
		.standardConfiguration()
		.developmentLogging()
		.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
		.plugin("aurelia-validation")
		.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
}
	<!doctype html>
	<html>

	<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	</head>

	<body>
	<div aurelia-app="src/configure">
	Loading...
	</div>

	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script>
	<script>
	System.import("aurelia-bootstrapper");
	</script>
	</body>

	</html>
	<template>
	<div>
	<md-lookup value.bind="value" options-function.bind="optionsFunction" display-field-name.bind="getDisplayName" label="pick an option">
	<template replace-part="option-template">
	<span style="color: blue">${option.id}</span> -
	<span>${option.name}</span>
	</template>
	<template replace-part="searching-template">
	Wait for 1 sec...
	</template>
	<template replace-part="no-matches-template">
	Didn't find anything
	</template>
	</md-lookup>
	You picked: ${value \| stringify}
	</div>
	</template>
	import { observable } from "aurelia-binding";
	import { ILookupOptionsFunctionParameter } from "aurelia-materialize-bridge";

	interface ICompany {
	id: number;
	name: string;
	}

	export class App {

	companies: ICompany[] = [{ id: 1, name: "Microsoft" }, { id: 2, name: "Google" }, { id: 3, name: "Apple" }];

	value: ICompany = this.companies[0];

	optionsFunction(p: ILookupOptionsFunctionParameter<ICompany>): Promise<ICompany[]> {
	if (p.value) {
	return Promise.resolve([p.value]);
	}
	else {
	return this.searchCompanies(p.filter);
	}
	}

	searchCompanies(filter: string): Promise<any[]> {
	return new Promise<any[]>((resolve, reject) => {
	setTimeout(() => resolve(this.companies.filter(x => x.name.includes(filter) \|\| x.id.toString().includes(filter))), 1000);
	});
	}

	setValue() {
	this.value = this.companies[2];
	}

	getDisplayName(x: ICompany){
	return `${x.name} (id=${x.id})`;
	}
	}

	// tslint:disable-next-line:max-classes-per-file
	export class StringifyValueConverter {
	toView(value) {
	return JSON.stringify(value);
	}
	}
	export async function configure(aurelia) {
	await aurelia.loader.loadModule("materialize-css");
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin("aurelia-materialize-bridge", bridge => bridge.useAll())
	.plugin("aurelia-validation")
	.globalResources("src/shared/logger");

	await aurelia.start();
	aurelia.setRoot("src/app");
	}