代码之家 › 专栏 › 技术社区 › Maniraj Murugan

如何使用typescript分割字符串的一部分?

autocomplete typescript angular javascript

Maniraj Murugan · 技术社区 · 6 年前

HTML格式

<div class="autocomplete">
    <div class="chips-input-container">
        <div class="col-md-4">
            <div class="user-chip" *ngFor="let user of userSelects">
                {{user.name}}
                <span (click)="deleteSelects(user)" class="delete-icon-chip">&#10006;</span>
            </div>
        </div>

        <div class="col-md-4 form-label-group">
            <input name="suggestion" type="text" id="autocomplete-input" class="form-control" placeholder="User" (click)="suggest()"
             [(ngModel)]="userSelectsString" (keyup)="onKey($event)" id="autocomplete-input">
            <label for="autocomplete-input" class="emailBox"></label>
            <label class="fa fa-caret-down input-icon"></label>
        </div>
    </div>

    <ul id="autocomplete-results" class="autocomplete-items" *ngIf="show">
        <li *ngFor="let s of suggestions" [ngClass]="isSelected(s) ? 'selected-suggestion' : ''" (click)="selectSuggestion(s)">{{ s.name }}</li>
    </ul>
</div>

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   suggestion: string = '';
  typeahead: FormControl = new FormControl();
  openSelectBox: boolean = false;

  fieldHistory: string[] = [];

  inputValue: string;
  autocomplete_results: any;
  input = document.querySelector('#autocomplete-input');
  userSelectsString = '';
  name = 'Angular';
  userSelects = [];
  suggestions = [{"id":"001","name":"mango"},{"id":"002","name":"apple"},{"id":"003","name":"banana"},{"id":"004","name":"pine"},{"id":"005","name":"orange"},{"id":"006","name":"chery"},{"id":"007","name":"watermelon"},{"id":"008","name":"grapes"},{"id":"009","name":"lemon"}];

  show: boolean = false;

  suggest() {
    this.show = true;
  }

  isSelected(s:any) {
   return this.userSelects.findIndex((item) => item.id === s.id) > -1 ? true : false;
  }

  selectSuggestion(s) {
    this.userSelects.find((item) => item.id === s.id) ? 
    this.userSelects = this.userSelects.filter((item) => item.id !== s.id) :
    this.userSelects.push(s);
    this.show = false;
  }

  deleteSelects(s) {
    this.userSelects = this.userSelects.filter((item) => item.id !== s.id);
  }

  assignToNgModel() {
    this.userSelectsString = '';
    this.userSelects.map((item) => this.userSelectsString += item.name + ' ');
  }

  onKey(e) {
    this.inputValue = e.target.value;

    if (this.inputValue.length > 0) {
      var people_to_show = [];

      this.autocomplete_results = document.getElementById("autocomplete-results");
      this.autocomplete_results.innerHTML = '';
      people_to_show = this.autocomplete(this.inputValue);

      for (let i = 0; i < people_to_show.length; i++) {
        this.autocomplete_results.innerHTML += '<li>' + people_to_show[i] + '</li>';
      }
      this.autocomplete_results.style.display = 'block';
    } else {
      people_to_show = [];
      this.autocomplete_results.innerHTML = '';
    }
  }

  autocomplete(val) {
    var people_return = [];
    for (let i = 0; i < this.suggestions.length; i++) {
      if (val === this.suggestions[i].slice(0, val.length)) {
        people_return.push(this.suggestions[i]);
      }
    }
    return people_return;
  }
}

至于选择和删除部分,一切都很好,但当我实现自动完成时,我无法得到结果,因为我正在使用slice作为对象数组。

  suggestions = [{"id":"001","name":"mango"},{"id":"002","name":"apple"},{"id":"003","name":"banana"},{"id":"004","name":"pine"},{"id":"005","name":"orange"},{"id":"006","name":"chery"},{"id":"007","name":"watermelon"},{"id":"008","name":"grapes"},{"id":"009","name":"lemon"}];

在for循环中,我得到的错误是排队 this.suggestions[i].slice(0, val.length) ,

  for (let i = 0; i < this.suggestions.length; i++) {
      if (val === this.suggestions[i].slice(0, val.length)) {
        people_return.push(this.suggestions[i]);
      }
    }

suggestions: any = [{"id":"001","name":"mango"},...}] ,它显示slice不是函数。

请帮助我实现自动完成的结果。

https://stackblitz.com/edit/angular-euuvxw

2 回复 | 直到 6 年前

Matt McCutchen 6 年前

您可能希望分割名称,而不是整个建议对象。看看你是如何使用结果的,你可能只想把名字 people_return 也:

for (let i = 0; i < this.suggestions.length; i++) {
  if (val === this.suggestions[i].name.slice(0, val.length)) {
  //                              ^^^^
    people_return.push(this.suggestions[i].name);
  }
}

Ankit Agarwal 6 年前

slice() 在数组类型值中。对你来说是 this.suggestions this.suggestions.slice(0, val.length)