Question

我正在开发一个角度为2/4的下拉建议搜索框。在文本框上键入内容并按搜索按钮时，将显示搜索到的详细信息。但是在这里，我想显示搜索内容，希望显示“按输入类型”的建议（例如下拉搜索）。我在不同的地方看到了很多技术，但是没有用。在这里，我安装了角材，但在节点模块中出现了一些错误

我想要这样

在这里，我将尝试使用管道，但无法正常工作。任何人都可以帮助我。

我的html是

<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>

component.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";
        });
}

我在这里是这样（这是问题，没有显示建议）

Answer 1

对于下拉式实施，您可以使用 angular material
将autocomplete组件用于ui

演示模板

HTML

<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[]）中进行搜索，您可以使用此逻辑

我在这里使用正则表达式来匹配数组中这些字符串的任何子字符串

打字稿

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

安装角度材质和动画

步骤-1：删除所有节点模块

从节点模块文件夹中删除所有文件

步骤-2：更新所有软件包到最新版本

npm i -g npm-check-updates

ncu -u

npm install

步骤3：安装有角度的材料和动画

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

npm install --save @angular/animations

步骤-4：导入使用该库所需的任何主题

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

步骤-4：修改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 { 
    ...
}

Answer 2

Material autocomplete example

内角材料：

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

Answer 3

尝试像这样在输入中使用（输入）而不是（键盘）：

<input name="search" class="form-control" type="text" placeholder="Search"
          (input)="FetchItemDetailsSearch(searchcontent)"
          [(ngModel)]="searchcontent">

编辑：

尝试在 FetchItemDetailsSearch 函数中将 this.searchcontent 替换为 itemcodeordesc ，如下所示：

this._enqService.FetchItemDetailsSearch(itemcodeordesc,this.pageIndex)
.subscribe(itemsData => this.itemdetails = itemsData,

Answer 4

使用管道，它将在component.ts文件中声明和定义的mainList上使用[（ngModel）] =“ searchcontent”

mainList：任何[] = [];

内部构造函数->定义要用于搜索结果的属性

this.mainList = ['property1'，'property2'，..，'propertyN'];

使用for循环在页面中显示结果-

* ngFor =“让xs |管道中的x：searchcontent：mainList”

Angular2 / 4搜索建议

4 个答案:

步骤-1：删除所有节点模块

步骤-2：更新所有软件包到最新版本

步骤3：安装有角度的材料和动画

步骤-4：导入使用该库所需的任何主题

步骤-4：修改app.modules.ts文件