使用可移动输入/标签搜索 (Ionic 2)答案

【问题标题】：Search with removable inputs/label (Ionic 2)使用可移动输入/标签搜索 (Ionic 2)
【发布时间】：2017-08-22 16:59:46
【问题描述】：

我正在创建一个食谱应用程序，我可以在其中进行搜索，并且用户可以按成分进行搜索。我希望功能是当他们触摸空格键以键入下一个输入时，它会显示为下面的标签，旁边有一个 X，因此取消选择相关输入。

我的搜索目前看起来像

但目的是让它看起来像下面有标签。

因为这是一个 Ionic 2 应用程序，有没有人以前看过这个或教程？或者想给我一些帮助，那就太好了。

新：刚刚注意到页面底部的堆栈溢出“标签”部分正是我希望实现的方式

【问题讨论】：

标签： angular typescript ionic-framework ionic2

【解决方案1】：

您可以在this plunker 中找到类似的内容。有很大的改进空间（以及更多验证），但演示几乎就是您想要的。

代码很简单，最相关的部分是：

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

然后在视图中：

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

最后但同样重要的是，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;
}

【讨论】：

【解决方案2】：

我会从数据模型的角度来解决这个问题。当你将你想要的东西隔离到它的核心时，你想要这样的东西，对于你的搜索字段上的每个输入事件，

您将搜索词转换为单词数组
您从该数组中删除最后一个单词，并使其成为您的标签数组
您将数组的最后一个单词作为输入的值

所以，假设你的组件是这样的

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

因此，您将搜索输入绑定到 @angular/forms 包中的 FormControl，以便您可以根据需要以编程方式设置值（此外还可以从 FormsModule 中的其他好东西中受益，您必须导入这些东西）。您还希望监视搜索输入字段中的输入事件，并在每个事件上更新您的标签并根据需要更新您的输入字段。

以上内容可以帮助您入门。可能需要额外的逻辑来处理边缘情况，可能需要根据需要添加去抖动，但至少这可以让你思考。

【讨论】：