Add contact chips to the search component
General idea
Highlight the terms (package names) already selected for comparison, which gives the user the clear sense of what will be compared.
Implementation suggestion
A single angular component can be used for this purpose. This component will be responsible for getting text inputs and adding them to the search term list.
Expected behaviour
- when a user hits space key, a new term is grabbed from the input and added to the list.
- when the user hits enter or clicks on search, the component activates the search route with the list as its params.
search.component.html
<button type="button" (click)="search()">
<i class="material-icons">search</i>
</button>
<ul>
<!-- Each item is styled as a chip -->
<li *ngFor="let term in searchTerms"></li>
</ul>
<input type="text" #searchInput (blur)="exitEditingMode()" (focus)="enterEditingMode()" [(ngModel)]="query" (keyup.enter)="search()" (keyup.esc)="removeFocus()" placeholder="What package are you looking for?">
<button type="button" [hidden]="!query" (click)="clearSearch()">
<i class="material-icons">close</i>
</button>
Edited by username-removed-622764