انگولار - پیشنهاد جستجو در Angular2/4

من در حال توسعه یک جعبه جستجوی پیشنهاد کشویی در Angular 2/4 هستم. هنگام تایپ در جعبه متن و فشار دادن دکمه جستجو، جزئیات جستجو شده نمایش داده میشوند. اما در اینجا من میخواهم که جستجو، پیشنهاد 'بههنگام تایپ' نمایش داده شود (مثل یک جستجوی کشویی). من تکنیکهای زیادی را در مکانهای مختلف دیدم اما کار نمیکند. اینجا Angular Material را نصب کردم و در ماژولهای نود خودم با برخی خطاها مواجه شدم.

من اینطور میخواهم

اینجا من میخواهم از پایپ استفاده کنم اما کار نمیکند.. آیا کسی میتواند لطفاً به من کمک کند..

اچتیامال من است

    <div class="form-group">
         <div class="input-group">
               <div [innerHTML]="highlighted"></div>
             <input name="search" class="form-control" type="text" placeholder="Search"
                  (keyup)="FetchItemDetailsSearch(searchcontent)"
                  [(ngModel)]="searchcontent">                       
              <span class="input-group-btn">
                  <button class="btn btn-success ProductSearchBtn" type="button" 
                      (click)='FetchItemDetailsSearch(searchcontent)'>
                        <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
                        <span style="margin-left:10px;">Search</span>
                  </button>
               </span>
          </div>                  
    </div>

کامپوننت.ts

     FetchItemDetailsSearch(itemcodeordesc: string): void {

        {
            this.highlight= this.searchcontent
                ? itemcodeordesc.replace(new RegExp('(' + this.searchcontent + ')', 'ig'),
                    '<span class=highlight>$1</span>')
                : itemcodeordesc;
        }

        this.pageIndex = 1;
        this.searchflag = 1;

        if (itemcodeordesc.length > 0)
            this.searchcontent = itemcodeordesc;
        else {
            itemcodeordesc = undefined
            this.searchcontent = itemcodeordesc;
        }
        this.prevScrollPosition = 0;
        this._enqService.FetchItemDetailsSearch(this.searchcontent,this.pageIndex).subscribe(itemsData => this.itemdetails = itemsData,
            error => {
                console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";
            });
    }

اینجا من اینطور شدم (این مشکل است، پیشنهاد نمایش داده نمیشود)

پاسخ شماره ۱

نمونه تکمیل خودکار متریال

نصب انگولار متریال:

npm install --save @angular/material @angular/cdk

برای انیمیشن:

npm install --save @angular/animations

اضافه کردن تم در style.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // angular animation module


import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule,MatFormFieldModule,MatAutocompleteModule,MatInputModule,ReactiveFormsModule,BrowserAnimationsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html:

<form class="example-form">
  <mat-form-field >
    <input type="text" placeholder="Filter Name" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

export interface User {
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  myControl = new FormControl();
  options: User[] = [
    { name: 'Mary' },
    { name: 'Masy' },
    { name: 'Maty' },
    { name: 'Mvry' },
    { name: 'Mbry' },
    { name: 'Shelley' },
    { name: 'Igor' }
  ];
  filteredOptions: Observable<User[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
      startWith<string | User>(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this._filter(name) : this.options.slice())
      );
  }

  displayFn(user?: User): string | undefined {
    return user ? user.name : undefined;
  }

  private _filter(name: string): User[] {
    const filterValue = name.toLowerCase();

    return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
  }
}

پاسخ شماره ۲

برای پیادهسازی منوی کشویی، میتوانید از Angular Material استفاده کنید
برای رابط کاربری، از مؤلفه Autocomplete استفاده کنید

الگوی نمایشی

اچتیامال

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="search" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" (keyup)="updated()" [(ngModel)]="data">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

حال برای جستجو در یک آرایه از رشتهها (در این مثال all[])، میتوانید از این منطق استفاده کنید

در اینجا من از regex برای مطابقت هر زیررشتهای از آن رشتهها در آرایه استفاده میکنم

تایپاسکریپت

export class AppComponent  {
  myControl = new FormControl();
  options: string[] = [];
  data : any;
  constructor() {
  }

  public updated() {
    this.options = [];
    if (this.myControl.value.length > 0) {
      let all = ['John', 'Jenny', 'Jonson']
      let searchedWord = this.myControl.value
      for(let key in all) {
        let r = all[key].search(new RegExp(searchedWord, "i"));
        if (r != -1) {
          this.options.push(all[key])
        }
      }
    } else {
      this.options = []
    }
  }
}

نمونه عملی: stackblitz

نصب متریال و انیمیشنهای انگولار

مرحله ۱ : تمام ماژولهای نود را حذف کنید

تمام فایلها را از پوشه node modules حذف کنید

مرحله ۲: بهروزرسانی همه بستهها به آخرین نسخه

npm i -g npm-check-updates

ncu -u

npm install

مرحله - ۳ : نصب angular material و animation

npm install --save @angular/material @angular/cdk

npm install --save @angular/animations

مرحله ۴: هر تمی را وارد کنید زیرا برای استفاده از کتابخانه لازم است

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

مرحله ۴: فایل app.modules.ts را ویرایش کنید

واردات

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';

متادیتای NgModule

@NgModule({
  imports: [ BrowserModule, FormsModule,MatFormFieldModule,MatAutocompleteModule,MatInputModule,ReactiveFormsModule,BrowserAnimationsModule ]
  ...
})
export class AppModule { 
    ...
}