angular - Pretraživanje s uklonjivim unosima/etiketom (Ionic 2)

Stvaram aplikaciju za recepte gdje imam pretraživanje i korisnik može pretraživati po sastojku. Želim da funkcionalnost bude takva da kad dodirnu razmaknicu za upis sljedećeg unosa, taj unos se pojavi ispod kao oznaka s X pokraj njega, čime se odgovarajući unos poništava.

Moja pretraga trenutno izgleda ovako

Ali cilj je da izgleda kao s etiketom ispod.

Budući da je ovo za Ionic 2 aplikaciju, je li netko to već vidio ili postoji neki tutorial? Ili želi li mi netko pomoći, to bi bilo sjajno.

NOVO: Upravo sam primijetio da je odjeljak "Oznake" na dnu stranice Stack Overflow-a točno onako kako bih želio da ovo bude implementirano

Odgovor #1

Nešto slično možete pronaći u ovom plunkeru. Ima puno prostora za poboljšanja (i još nekoliko provjera), ali demo je uglavnom ono što tražite.

Kod je vrlo jednostavan, najrelevantniji dijelovi su:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  ...
  ...
})
export class HomePage {

  public myForm: FormGroup;
  public tags: Array<string>;

  constructor(public formBuilder: FormBuilder) {
    this.tags = ['tag1', 'tag2', 'tag3'];
    this.myForm = this.formBuilder.group({
      tags: ['']
    });

    // Add an async validation for the username
    this.myForm.get('tags')
        .valueChanges
        .subscribe((value: string) => {
          if(value.indexOf(' ') > -1) {
            let newTag = value.split(' ')[0];
            console.log(newTag);
            if(newTag) {
              this.tags.push(newTag);
              this.myForm.get('tags').setValue('');
            }
          }
        });
  }

  public deleteTag(tagName: string) {
    // Find the index of the tag
    let index = this.tags.indexOf(tagName);

    // Delete the tag in that index
    this.tags.splice(index, 1);
  }
}

Zatim u prikazu:

<ion-header>
  <ion-navbar>
    <ion-title>HomePage</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>      
  <form [formGroup]="myForm">
    <ion-item>
      <ion-input formControlName="tags" type="text"></ion-input>
    </ion-item>
  </form>

  <div class="tag-container">
    <span class="tag" *ngFor="let tag of tags">
      {{ tag }}
      <ion-icon name="close" (click)="deleteTag(tag)"></ion-icon>
    </span>
  </div>
</ion-content>

I naposljetku, CSS!

.tag-container {
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 10px;
  margin: 10px;
}

.tag {
  display: inline-block;
  background-color: #5bc0de;
  color: #fff;
  margin: 5px 5px;
  padding: 2px 5px;
}

Odgovor #2

Ovaj problem bih pristupio s gledišta podatkovnog modela. Kada izolirate ono što želite do njegove suštine, želite nešto što za svaki ulazni događaj na vašem polju za pretraživanje,

1. pretvorite izraz za pretraživanje u niz riječi
2. izbaciš posljednju riječ iz tog niza i napraviš od toga svoj niz oznaka
3. uzimaš posljednju riječ iz svog niza i postavljaš je kao vrijednost svog unosa

Dakle, recimo da je vaš komponenta poput

@Component({
  .....
  template: `
    <input [formControl]="searchControl" (input)="onSearchInput(input.value)" />
    <label *ngFor="let label of labels">{{ label }} </label>
  `
})
export class SearchComponent {
  searchControl = new FormControl('');
  labels: string[] = [];

  onSearchInput(searchValue) {
    let newSearchValues: string[] = searchValue.split(' ');
    // if the current search term has a space,
    // create the new label and update the input field
    if (newSearchValues.length > 1) {
      this.labels.push(newSearchValues[0]);
      this.searchControl.setValue(newSearchValues[1]);
    }
  }
}

Dakle, povezujete svoj unos pretraživanja s FormControl iz paketa @angular/forms kako biste mogli programski postaviti vrijednost prema potrebi (plus da biste iskoristili druge pogodnosti u FormsModule, koji ćete morati uvesti). Također želite pratiti događaje unosa iz svog polja za pretraživanje, i pri svakom događaju ažurirati svoje oznake i po potrebi ažurirati svoje polje za unos.

Gore navedeno može vam pomoći za početak. Možda će biti potrebna dodatna logika za rukovanje rubnim slučajevima, možda ćete htjeti dodati odspajanje po potrebi, ali barem vas ovo može potaknuti na razmišljanje.