Question

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

我的搜索目前看起来像

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

由于这是针对Ionic 2应用程序的，有没有人在之前看过这个或教程？或者想给我一些帮助，那会很棒。

新：刚注意到堆栈溢出＆＃34;标签＆＃34;页面底部的部分是我希望实现的确切方式

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

Answer 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中的其他好东西中获益，您必须导入它们）。您还希望监视搜索输入字段中的输入事件，并在每个事件上更新标签并根据需要更新输入字段。

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

使用可移动输入/标签搜索（Ionic 2）

2 个答案: