搜索结果在带有十字符号的文本框中
发布于2023-09-25 20:28 阅读(832) 评论(0) 点赞(14) 收藏(1)
更新1：
嘿，谢谢你的回复...但是当我输入 h 时，它会显示一组值...当我选择值时，它应该在带有十字符号的文本框中显示...就像在 stackoverflow 中一样，我们编辑标签
我在 angular2 中有一个搜索引擎代码。当我选择搜索结果时，我需要在文本框中显示值，旁边带有十字按钮。现在我正在得到结果。但是当我选择值时，如何在带有十字符号的文本框中显示。
https://stackblitz.com/edit/angular6-ya3e4u?file=app/app.component.html
服务
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
@Injectable()
export class SearchService {
baseUrl: string = 'https://api.cdnjs.com/libraries';
queryUrl: string = '?search=';
constructor(private http: Http) { }
search(terms: Observable<string>) {
return terms.debounceTime(400)
.distinctUntilChanged()
.switchMap(term => this.searchEntries(term));
}
searchEntries(term) {
return this.http
.get(this.baseUrl + this.queryUrl + term)
.map(res => res.json());
}
}
html
<input
(keyup)="searchTerm$.next($event.target.value)">
<ul *ngIf="results">
<li *ngFor="let result of results | slice:0:9">
<a href="{{ result.latest }}" target="_blank">
{{ result.name }}
</a>
</li>
</ul>
<div class="close" (click)="delete(currentItem)">X</div>
解决方案
尝试以下代码，它会对您有所帮助。演示 StackBlitz
<input
(keyup)="searchTerm$.next($event.target.value)">
<ul *ngIf="results">
<li *ngFor="let result of results | slice:0:9">
<a href="{{ result.latest }}" target="_blank">
{{ result.name }}
</a>
<div class="close rigth" (click)="delete(result)">X</div>
</li>
</ul>
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/531596/2f9a2093a661877da731/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力