搜索与可移动输入/标签（离子2）

Question

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

我的搜索目前看起来像

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

因为这是一个Ionic 2应用程序，有没有人看过这个之前做过或教程？或者想给我一些帮助，那会很棒。

新：只注意到堆栈溢出“标签”，在页面的底部是谨以此实现

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

我会从视图中的数据的角度解决这个问题的具体方法模型。当你孤立你想要什么到它的核心，你想要的东西，从而为您的搜索字段中的每个输入事件，

1. 将转换为搜索项成单词数组
2. 你脱光硬道理从阵列中，并使你的标签阵列
3. 你把你的阵列的最后一个字，让您输入的值

所以，让我们说你的组件就像

@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中的其他好处） 。 您还希望监视来自搜索输入字段的输入事件，并在每个事件上更新标签并根据需要更新输入字段。

以上可以让你开始。可能需要额外的逻辑来处理边界情况，可能需要根据需要添加去抖动，但至少这可以让你思考。