<link href="css/autocomplete-select.css?v=2.7.0-TR3" rel="stylesheet"/>

<div class="autocomplete-select-wrapper">
    <div class="autocomplete-select">
        <div ng-hide="isMultiline">
            <input type="text" ng-model="searchInput" ng-change="onChange()" ng-keydown="onKeyDown($event)"
                   ng-blur="onBlur()" ng-required="required"
                   class="autocomplete-input autocomplete-editable" ng-class="styleClass" placeholder="{{placeholder}}">
        </div>
        <div ng-show="isMultiline">
            <textarea
                ng-model="searchInput"
                ng-change="onChange()"
                ng-keydown="onKeyDown($event)"
                ng-blur="onBlur()"
                ng-required="required"
                class="autocomplete-textarea autocomplete-editable" ng-class="styleClass"
                placeholder="{{placeholder}}"
                rows="{{initialRows}}">
        </textarea>
        </div>
    </div>
    <div class="autocomplete-results-wrapper card">
        <div ng-repeat="autoCompleteUriResult in autoCompleteUriResults track by $index"
             ng-click="selectResource(autoCompleteUriResult)"
             ng-mousemove="setActiveItemIndex($index)"
             ng-class="{active: activeSearchElm === $index, selected: selectedElementIndex === $index}"
             class="result-item">
            <p ng-bind-html="getResultItemHtml(autoCompleteUriResult)"></p>
        </div>
    </div>
</div>
