如何以角6突出显示输入字段文本 [英] How to highlight an input field text in angular 6

问题描述

这是(custom.component.html)文件

This is (custom.component.html) file

         <input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
            <div *ngFor="let s of filteredScreenshots">
                {{s | json}}
             </div>


    <mat-card class="example-card" *ngFor="let filteredScreen of 
        filteredScreens"  let i = index>

      <mat-card-header>
         <div mat-card-avatar class="example-header-image" >
              <img mat-card-image class="list-img" src="{{filteredScreen?.img}}" >
        </div>
        <mat-card-content class="names"><b>{{ filteredScreen?.name }}</b></mat-card-content>
      </mat-card-header>
    </mat-card>

这是(customer.component.ts)

This is(customer.component.ts)

  import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http'; 
 import { map } from 'rxjs/operators'
 import * as _ from 'lodash';


 @Component({
 selector: 'ylb-customer',
 templateUrl: './customer.component.html',
 styleUrls: ['./customer.component.css']
    })

 export class CustomerComponent  {
    spaceScreens: Array<any>;
    filteredScreens = [];
    name: string;


constructor(private http:Http){
    this.http.get('assets/app.json').pipe(
     map(response => response.json().screenshots)
   )
    .subscribe(res => {
        this.spaceScreens = this.sortByName(res); //this is what we filter against
         this.filteredScreens =  this.sortByName(res);//init with full list
     });
}

onNameChange() {    
    this.filteredScreens=_.filter(this.spaceScreens,(item)=>{
    console.log(this.name)
    return item.name.toLowerCase().indexOf(this.name.toLowerCase())>-1;
        });
    }
sortByName = function(users) {
    const byName = function(user1,user2) {
        return user1.name.localeCompare(user2.name);
        };
     return users.slice().sort(byName);
    };

}

这是资产文件夹中存在的(app.json)json文件

This is the (app.json)json file present inside assets folder

        {   
        "screenshots":[ 

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Virat Kohli"
                    },

                    {
                        "img":"assets/img/json_2.jpg",
                        "name":"Joe Root"
                    }




            ]        
        }

过滤进行得很好，并按字母顺序显示json数据(名称).

filtering is happening fine and it is displaying the json data(name) in alphabetical order.I want to highlight the text entering in the field like in mobile contact list as like in attached image.

在此处输入图像描述

尝试了很多资源但没有结果

Tried many resources but no result

推荐答案

在Chrome和其他浏览器中(请参见这里)，您可以使用类似这样的组件:

In Chrome and also in other Browsers (see here) you can use a component like this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'highlight'
})

export class HighlightSearch implements PipeTransform {

  transform(value: string, args: string): any {
    if (args && value) {
      value = String(value); // make sure its a string
      const startIndex = value.toLowerCase().indexOf(args.toLowerCase());
      if (startIndex !== -1) {
        const matchingString = value.substr(startIndex, args.length);
        return value.replace(matchingString, "<mark>" + matchingString + "</mark>");
      }

    }
    return value;
  }
}

要这样使用:

<mat-card-content class="names"><b [innerHTML]="filteredScreen.name | highlight: name"></b></mat-card-content> 

这篇关于如何以角6突出显示输入字段文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！