javascript - 在带有十字符号的文本框中搜索结果

Question

更新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>

标签： javascripthtmlcssangularrxjs

Answer 1

试试下面的代码，它会帮助你。演示 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>