Add component for auto-completing inputs.

services/web/public/coffee/components/inputSuggestions.coffee

@@ -0,0 +1,49 @@
+define [
+	"base"
+], (App) ->
+	inputSuggestionsController = ($scope, $element, $attrs) ->
+		ctrl = @ 
+		ctrl.showHint = false
+		ctrl.hasFocus = false
+		ctrl.handleFocus = () ->
+			ctrl.hasFocus = true
+			ctrl.suggestion = null
+		ctrl.handleBlur = () ->
+			ctrl.showHint = false
+			ctrl.hasFocus = false
+			ctrl.suggestion = null
+		ctrl.handleKeyDown = ($event) ->
+			if ($event.which == 9 or $event.which == 13) and ctrl.suggestion? and ctrl.suggestion != ""
+				$event.preventDefault()
+				ctrl.localNgModel += ctrl.suggestion
+				ctrl.suggestion = null
+				ctrl.showHint = false
+
+		$scope.$watch "$ctrl.localNgModel", (newVal, oldVal) ->
+			if ctrl.hasFocus and newVal != oldVal
+				ctrl.suggestion = null
+				ctrl.showHint = false
+				ctrl.getSuggestion({ userInput: newVal })
+					.then (suggestion) -> 
+						if suggestion? and newVal == ctrl.localNgModel
+							ctrl.showHint = true
+							ctrl.suggestion = suggestion.replace newVal, ""
+					.catch () -> ctrl.suggestion = null
+		return
+
+	App.component "inputSuggestions", {
+		bindings:
+			localNgModel: "=ngModel"
+			getSuggestion: "&"
+			inputId: "@"
+			inputPlaceholder: "@"
+		controller: inputSuggestionsController
+		template: """
+			<div class="input-suggestions">
+				<div type="text"  + $ctrl.suggestion" class="form-control input-suggestions-shadow" ng-show="$ctrl.showHint">
+					<span ng-bind="$ctrl.localNgModel" class="input-suggestions-shadow-existing"></span><span ng-bind="$ctrl.suggestion" class="input-suggestions-shadow-suggested"></span>
+				</div>
+				<input type="text" ng-focus="$ctrl.handleFocus()" ng-keyDown="$ctrl.handleKeyDown($event)" ng-blur="$ctrl.handleBlur()" ng-model="$ctrl.localNgModel" ng-model-options="{ debounce: 50 }" class="form-control input-suggestions-main" ng-attr-id="{{ ::$ctrl.inputId }}" ng-attr-placeholder="{{ ::$ctrl.inputPlaceholder }}">
+			</div>
+			"""
+	}

services/web/public/stylesheets/components/input-suggestions.less

@@ -0,0 +1,21 @@
+.input-suggestions {
+	position: relative;
+	height: @input-height-base;
+}
+	.input-suggestions-main {
+		position: absolute;
+		top: 0;
+		background-color: transparent;
+	}
+
+	.input-suggestions-shadow {
+		background-color: @input-bg;
+		padding-top: 4px;
+	}
+		.input-suggestions-shadow-existing {
+			color: transparent;
+		}
+
+		.input-suggestions-shadow-suggested {
+			color: lighten(@input-color, 25%);
+		}