<!-- Copyright (C) 2016 NooBaa -->

<input type="text"
    ko.textInput="ko.pc(text, onInput, $component)"
    ko.hasFocus="hasFocus"
    ko.attr.placeholder="placeholder"
    ko.event.blur="onBlur"
    ko.event.keydown="onKeyDown"
    ko.validationCss="$form.region"
/>
<ul class="list-no-style card-shadow suggestion-list"
    ko.visible="isListVisible"
    ko.foreach="suggestions"
    ko.scrollTo="$component.keyboardFocus"
>
    <li class="suggestion"
        ko.css.ring="$index.eq($component.keyboardFocus)"
        ko.event.mousedown=" () => $component.onSuggetionMouseDown(value)"
    >
        <div class="no-wrap">
            {{prefix}}<span class="match">{{match}}</span>{{suffix}}
        </div>
        <div class="no-wrap remark">
            {{remark}}
        </div>
    </li>
</ul>
