搜索與可移動輸入/標籤（離子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中的其他好處） 。 您還希望監視來自搜索輸入字段的輸入事件，並在每個事件上更新標籤並根據需要更新輸入字段。

以上可以讓你開始。可能需要額外的邏輯來處理邊界情況，可能需要根據需要添加去抖動，但至少這可以讓你思考。