Я создаю пользовательскую функцию автозаполнения в своем угловом приложении, следуя инструкции ЭТОГО .
В основном он включает тег ввода HTML, в котором пользователь может ввести поле запроса, после чего следуетнеупорядоченный список, содержащий список совпавших результатов.
Проблема с этим дизайном заключается в том, что когда пользователь вводит строку в поле запроса и результаты сопоставления отображаются ниже, нажатие клавиши массива вниз не приводит кфокус на первый результат в списке, чтобы выбрать его.Теперь эту опцию можно выбрать, нажав на элемент списка.
Например:
Если строка запроса «jac», отображается список результатов «jacob», «jack», «jaccard» и т. Д. При нажатии клавиши со стрелкой вниз Iхотите, чтобы фокус был смещен на первый результат, который является "jacob".
Вот код:
search.component.html
<div class="input-group">
<input type="text" class="form-control" [formControl]="queryField" value="queryField" id="companyName"
placeholder="Company Name">
<span class="input-group-addon">
<button class="arrow" type="submit" (click)="getCompanyDetails()">
<span>
<img src="../../assets/ic-arrow-forward.svg" class="ic_arrow_forward">
</span>
</button>
</span>
<ul class="filter-select">
<li class="filter-select-list" *ngFor="let result of searchResults; let i = index" (click)="listClick(result)">
<span class="comp-name">{{ result.companyName }}</span>
</ul>
</div>
search.component.ts
listClick(selectedCompany) {
this.searchResults = null;
this.service.companyName = selectedCompany.companyName;
this.queryField.setValue(selectedCompany.companyName, {emitEvent: false});
}
ngOnInit() {
this.queryField.valueChanges
.pipe(debounceTime(200))
.pipe(distinctUntilChanged())
.pipe(switchMap((queryField) => this.service.search(queryField)))
.subscribe(
(response) => {
this.searchResults = response;
});
}
Как мне добиться этого в угловом формате, желательно без использования jQuery.
Заранее спасибо!