我有一個連接到我的 apiurl 的自動完成搜索欄位
我不想做的（但我不知道如何使用 TypeScript 或 Angular 來做到這一點）是：更改文本顏色并使其粗體僅匹配下拉串列中的字母與我在輸入欄位中寫入的字母。
角度：
<form class="mt-4 mb-4">
<mdb-form-control class="d-flex align-items-center">
<input mdbInput autocomplete="off" type="text" list="joblistOptions" class="form-control" name="text" [(ngModel)]="text" (ngModelChange)="onChange()"/>
<button class="btn btn-primary submit" type="submit"><i class="fa fa-search"></i></button>
<label mdbLabel class="form-label" for="text">Vpi?ite poklic, o katerem bi ?eleli izvedeti ve?</label>
</mdb-form-control>
<div *ngIf="showResults" class="autocomplete-dropdown">
<ul class="autocomplete-item-list">
<li class="autocomplete-item" *ngFor="let job of filteredJobs" [routerLink]="['/job-description',job.nadnaslov]">{{ job.nadnaslov }}</li>
</ul>
</div>
</form>
打字稿：
export class SearchComponent implements OnInit {
text: string = '';
showResults: boolean = false;
testJobs: any;
filteredJobs: any;
private jobsSubs: Subscription = new Subscription();
constructor(private jobsService: JobsService) { }
ngOnInit() {
this.getAllJobs();
}
onChange() {
if (this.text.length > 0) {
this.showResults = true;
} else {
this.showResults = false;
}
if (this.text.length === 1) {
//console.log('test');
this.filteredJobs = this.testJobs.filter((job:any) => job.nadnaslov.split('')[0] === this.text);
}
else if (this.text.length >= 2){
this.filteredJobs = this.testJobs.filter((testJobs:any) => testJobs.nadnaslov.toLocaleLowerCase().includes(this.text.toLocaleLowerCase()));
}
else {
this.filteredJobs = [];
}
if (this.filteredJobs.length === 0) {
}
}
getAllJobs() {
this.jobsService.getJobs().subscribe((response: any) => {
this.testJobs = response;
this.filteredJobs = response;
});
}
}
謝謝您的幫助
uj5u.com熱心網友回復：
這是一個可行的解決方案：https ://stackblitz.com/edit/plain-angular6-fmdzze
請注意：這是一個基本示例，但要保持專案的適當邏輯和結構（您共享的部分）。不過，您將不得不使用 html 模板，以使其適用于您的 mdb-form-control。您還需要添加您的[routerLink].
本質上，我正在更改與輸入文本匹配的作業的 .nadnaslov 值，方法是使用<span>添加了樣式（如顏色：紅色）的匹配子字串，然后將其顯示為 li 的 innerHtml。
該方法首先洗掉所有添加的標簽（如果過濾的作業已被先前的輸入更改）以回傳到“原始”.nadnaslov 值。然后你自己的邏輯去 - 填充filteredJobs。之后，如果filteredJobs 有內容（長度> 0），我按照解釋包裝.nadnaslov。
請注意，添加了一個管道來阻止對 html 的清理。
uj5u.com熱心網友回復：
您需要更新 DOM 以更改顏色。
我建議對這段代碼進行一些更改以添加 2 個元素，一個用于粗體，并更改顏色文本。
<li class="autocomplete-item" *ngFor="let job of filteredJobs" [routerLink]="['/job-description',job.nadnaslov]">
<span class="bold color">{{job.boldText}}</span>
<span>{{ job.nadnaslov }}</span>
</li>
然后，您可以為每種顏色添加一個 CSS 類，并通過為每個名為 class 的作業添加一個新屬性來替換它。
<li class="autocomplete-item" *ngFor="let job of filteredJobs" [routerLink]="['/job-description',job.nadnaslov]">
<span class="bold {{job.class}}">{{job.boldText}}</span>
<span>{{ job.nadnaslov }}</span>
</li>
在此之后，您將需要更新您的 ts 檔案，以便您可以獲取并相應地更新陣列中的作業物件。
不是一個完美的解決方案，但它會為你作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/417402.html
標籤：