[英]How to move focus to a list item on using the down arrow key on a custom search field?
I am building a custom autosuggest feature in my angular application following THIS tutorial. 我将按照本教程在我的角度应用程序中构建自定义自动建议功能。
It basically includes an HTML input tag where the user can type in the query field, followed by an unordered list that holds the list of matched results. 它基本上包括一个HTML输入标签,用户可以在其中输入查询字段,然后是一个无序列表,其中包含匹配结果的列表。
The issue with this design is that once the user types in a string in the query field and the matching results are displayed below, pressing the down array key does not bring the focus to the first result in the list to select it. 这种设计的问题在于,一旦用户在查询字段中输入字符串并且匹配的结果显示在下面,按向下数组键就不会将焦点移到列表中的第一个结果上以进行选择。 The option can now only be selected by clicking on the list item.
现在只能通过单击列表项来选择该选项。
For eg: 例如:
If the query string is "jac", the list of results displayed are "jacob", "jack", "jaccard" etc. On pressing the down arrow key I want the focus to be shifted to the first result which is "jacob". 如果查询字符串为“ jac”,则显示的结果列表为“ jacob”,“ jack”,“ jaccard”等。按向下箭头键时,我希望焦点转移到第一个结果为“ jacob” 。
Here's the code: 这是代码:
search.component.html 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 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;
});
}
How can I achieve this in angular, preferably without using jQuery. 我如何才能做到这一点,最好不使用jQuery。
Thanks in advance! 提前致谢!
Have a look at ng2-ui/auto-complete 看看ng2-ui / auto-complete
Great component, you can refer it to build your custom component. 很棒的组件,您可以参考它来构建您的自定义组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.