javascript - Klickhändelse i ul- och li-undersammansättningsmeny från inmatningsfält, det är en förslagsfält

Jag vill ha en klickfunktion på listobjektet som kommer att utlösa en funktion i komponenten och också fylla i inmatningsfältet.

Hittills har jag försökt använda (click), (ngModelChange) och (change), men inget av detta verkar fungera. Det verkar som att jag inte kan klicka på rullgardinslistan.

MALL

<input type="text" class="form-control form-rounded" [formControl]="queryField" placeholder="Search" (blur)="myFunction()" (focus)="myFunction1()" />
<ul class="filter-select form-rounded" >
<li class="filter-select-list" *ngFor="let result of results" 
(click)="selectedProduct($event)">
{{result.productName}}
</li>
</ul>

KOMPONENT

selectedProduct(){
    console.log('Hello');
}

CSS

.filter-select {
  position: absolute;
  list-style: none;
  padding : 0;
  z-index: 99;
  border-bottom: none;
  border-top: none;
  border: 1px solid gainsboro;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
}

.filter-select-list{
  display: flex;
  padding: 10px;
  cursor: pointer;

  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

.filter-select-list:hover{
  background-color:gainsboro;
}

Jag vill att funktionen ska aktiveras.

Svar #1

Sätt [(ngModel)] och vid klick på li, skicka result.name så här: (click)="selectedProduct(result.productName)" eftersom $event bara fungerar med form-input och inte <li> eller <div>

Mall :

<input type="text" class="form-control form-rounded" [(ngModel)]="queryField" placeholder="Search" (blur)="myFunction()" (focus)="myFunction1()" />


<ul class="filter-select form-rounded" >

    <li class="filter-select-list" *ngFor="let result of results" 
    (click)="selectedProduct(result.productName)">
        {{result.productName}}
    </li>
</ul>

TS :

selectedProduct(event) {
    this.queryField = event
}

Funktionerande demo

Svar #2

För att uppnå förväntat resultat, gör följande ändringar

1. Vid klick, skicka result istället för $event - (click)="selectedProduct(result)"

2. Uppdatera värdet på queryField med hjälp av setValue()-metoden.

selectedProduct(val){ this.queryField.setValue(val.productName); }

fungerande kod för referens - https://stackblitz.com/edit/angular-yz2nr2?file=src/app/app.component.ts

app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  queryField = new FormControl('');
  results = [
    {productName:"p1"},
    {productName:"p2"},
    {productName:"p3"}
  ]
  selectedProduct(val){
    this.queryField.setValue(val.productName);
}
}

app.component.html

<input type="text" class="form-control form-rounded" [formControl]="queryField" placeholder="Search" (blur)="myFunction()" (focus)="myFunction1()" />
<ul class="filter-select form-rounded" >
<li class="filter-select-list" *ngFor="let result of results" 
(click)="selectedProduct(result)">
{{result.productName}}
</li>
</ul>