BA1995 BA1995 - 1 month ago 6
TypeScript Question

Search with removable inputs/label (Ionic 2)

I am creating a recipe app where I have a search and the user can search by the ingredient. I want the functionality to be when they touch the spacebar to type the next input for it to appear as a label below with a X next to it, therefore deselecting the relevant input.

My search currently looks like
Current

But the aim is for it to look like with the label underneath.
idea

As this is for an Ionic 2 app, has anyone seen this done before or a tutorial? Or wants to give me some help, that would be great.

NEW: Just noticed that the Stack overflow "Tags" section at the bottom of the page is the exact way I would like this implemented

Answer Source

You can find something similar in this plunker. There's a lot of room for improvements (and some more validations) but the demo is pretty much what you're looking for.

The code is very straightforward, the most relevant parts are:

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);
  }
}

Then in the view:

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

And last but not least, the 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;
}