There is a textbox with autocomplete functionality. When the user clicks on the textbox, an API call is made with two parameters - Pubid and Date. The data is then displayed in a dropdown with autocomplete feature.
Now I am attempting to have the data appear in the dropdown as soon as the user clicks on the textbox, without the need for user typing. After the data is displayed, the user can filter it using the autocomplete feature.
component.html
<div class="form-field col-lg-12">
<label class="label" for="message">Headline</label>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<input [(ngModel)]="articleTitleKeyUp" (ngModelChange)="keyUpArticle(articleTitleKeyUp)" name="article"
class="input-text js-input" type="text" required autocomplete="off">
<div class="search-result" *ngIf="articles" style="max-height: 100px;">
<ul style="margin:0; padding:5px; max-height: 100px;">
<li *ngFor="let article of articles">
<a (click)="onClickArticle(article)">{{article.Title}}</a>
</li>
</ul>
</div>
</div>
component.ts
ngOnInit(): void {
/* Call API for publications on page load */
this.article.postPublication(null).subscribe((data: any) => {
this.allPubs = data.result;
console.log(this.publications);
});
}
onFocusPublication() {
console.log(this.selectedDate);
}
/* POST article with PUB id and Date */
keyUpPublication(e) {
let k = e as string;
let kl = k.length;
this.publications = this.allPubs.filter((p) => {
// let title = p.Title.toLowerCase()
// return title.substring(0, kl) == k.toLowerCase()
let title = p.Title + ' -' + p.city;
return title.toLowerCase().includes(k.toLowerCase());
});
}
onClickPublication(pub: IPub) {
this.pubTitleKeyUp = pub.Title + ' -' + pub.city;
this.selectedPub = pub;
this.publications = [];
}
/* POST article with PUB id and Date */
keyUpArticle(e) {
if (!this.selectedPub) {
return alert('Please select a Date and publication first!');
}
let k = e as string;
let kl = k.length;
if (this.allArticles?.length) {
return (this.articles = this.allArticles.filter((p) => {
let title = p.Title.toLowerCase();
return title.substring(0, kl) == k.toLowerCase();
}));
}
this.isLoading = true;
this.article
.postArticlesData({
pubid: this.selectedPub.PubId,
pubdate: this.selectedDate,
})
.subscribe(
(data: any) => {
this.isLoading = false;
this.allArticles = data.result || [];
this.articles = this.allArticles.filter((p) => {
let title = p.Title.toLowerCase();
return title.substring(0, kl) == k.toLowerCase();
});
},
(e) => {
this.isLoading = false;
}
);
}
onClickArticle(article) {
this.articleTitleKeyUp = article.Title;
this.selectedArticle = article;
this.articles = [];
}
onPubChange() {
console.log(this.selectedDate, this.selectedPub);
}
onSubmit() {
if (this.selectedArticle && this.selectedDate && this.selectedPub) {
this.router.navigateByUrl(
'delete-article/' + this.selectedArticle.ArticleID
);
} else {
alert('Please select Caldendar, and then Publication');
}
}
}