DropDown组件CSS问题

Question

我正在使用Angular-2构建下面的下拉组件。

我的下拉列表也有自动填充功能，现在效果很好。我的问题是CSS。要求是，当用户输入字符时，它们应显示为灰色，并且所有打印的字符也应显示为灰色显示在自动填充选项建议中。

在此图片中，当用户键入opt时，字符将显示为灰色，列出的所有自动填充选项也会显示为灰色。我不知道如何实现这一点。 我的代码：Plunker：https://plnkr.co/edit/13RV3khyFt56eVkuw8ww?p=preview

HTML：

const char* getTitle() const;
const char* getArtist() const;
const char* getAlbum() const;

const char* Song::getTitle() const {
   return title;
}

const char* Song::getArtist() const {
   return artist;
}

const char* Song::getAlbum() const {
   return album;
}

过滤代码（相关部分）：

  <input #input type="text" [(ngModel)]="query" (keyup)="filter($event)">
  <button  (click)="showAll(input)">
    <span class="tn icon-icon_Dropdown_Arrow tn-dropdown-icon"></span>
    <i aria-hidden="true"></i>
  </button>

  <ul id="list-group" *ngIf="filteredList.length > 0">
      <li *ngFor="let item of filteredList" [id]="item.selected" [class.selected]="item.selected" (click)="select(item)">
        {{ item.option}}
      </li>
  </ul>
  <div *ngIf="queryError">{{errorMsg}}</div>

}

filter（event：any）{

filterQuery() {
     this.filteredList = this.items.filter((el: any) => {
       //return el.option.toLowerCase().substr(0,this.query.length) === this.query.toLowerCase();

   return el.option.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
 });

 if(this.query.length>1){
   if(!this.filteredList.length){
     this.queryError =true;
     //console.log("Query length",this.query.length);
   }
   else{
      this.queryError =false;
   }
 }
 else{
   this.queryError =false;
 }

}

 if (this.query !== '') {
   if (this.opened) {
     if ((event.keyCode >= 48 && event.keyCode <= 57) ||
       (event.keyCode >= 65 && event.keyCode <= 90) ||
       (event.keyCode == 8)) {

       this.pos = 0;
       this.filterQuery();

     } else if (event.keyCode != 38 && event.keyCode != 40 && event.keyCode != 13) {
       this.filteredList = this.items;

     }
   } else {
     this.filterQuery();

   }
 } else {
   if (this.opened) {
     this.filteredList = this.items;

   } else {
     this.filteredList = [];
   }
 }

 for (let i = 0; i < this.filteredList.length; i++) {
   this.filteredList[i].selected = false;
 }

 if (this.selectedItem) {
   this.filteredList.map((i) => {
     if (i.id == this.selectedItem.id) {
       this.pos = this.filteredList.indexOf(i);
     }
   })
   this.selectedItem = null;
 }

 // Arrow-key Down
 if (event.keyCode == 40) {
   if (this.pos + 1 != this.filteredList.length)
     this.pos++;
 }
 //console.log(this.pos)

 // Arrow-key Up
 if (event.keyCode == 38) {
   if (this.pos > 0)
     this.pos--;
 }

 if (this.filteredList[this.pos] !== undefined)

   this.filteredList[this.pos].selected = true;

 //enter
 if (event.keyCode == 13) {
   if (this.filteredList[this.pos] !== undefined) {
     this.select(this.filteredList[this.pos]);
   }
 }

 // Handle scroll position of item
 let listGroup = document.getElementById('list-group');
 //console.log("listGroup",listGroup);
 let listItem = document.getElementById('true');
 //console.log("listItem",listItem)
 if (listItem) {
   listGroup.scrollTop = (listItem.offsetTop - 200);
 }

showAll（input：any）{      input.select（）;

 select(item: any) {


   this.selectedItem = item;

   this.query = item.option;
   this.filteredList = [];
  // this.opened = false;
 }

}

Answer 1

嗯，这不仅仅是一个CSS问题。 因为在<li>中填充了一个简单的文本，所以在你的应用程序中添加一个Pipe会起作用，它会匹配类型化的查询然后回绕span，然后我们可以做CSS工作。

Demo

添加了JS和CSS

CSS

.matching , .input-list {
  color: #ccc;

}

JS - src / autocomplete.ts

在src/autocomplete.ts

的第一行后添加此内容

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: string, query: string): string {  
    return value.split(query).join('<span class="matching">' + query + '</span>');
  }   
} 

将模板中的LI更改为此

<li *ngFor="let item of filteredList" [class.active]="item.selected" [id]="item.selected" class="list-group-item item-list" (click)="select(item)"  [innerHTML]="item.name | exponentialStrength:query"></li>

将以下代码添加到@Component

pipes: [ExponentialStrengthPipe]   

演示图片仅供参考