CODEWITHSUNDEEP
htmlangular
Naveen
Naveen

Reputation: 356

Angular (keyup) event not detecting only # symbol

Im trying to implement search bar using angular (keyup) event.And i have file name like

when i search base @ or base $ or base 1 in the search bar it filters fine. but when i search base # it dont filter base # it filter all file name with base. here is the code below which i have coded

My html:

<input type="search" class="form-control" placeholder="Search file" (keyup)="onSearch($event)" [(ngModel)]='searchKeywords'>

my js code:

onSearch(event: any) {
    const keywords = event.target.value;
    if (keywords && keywords.length > 2) {
          const apiURL =`abc/thg/hjy?filter[file.name]=${keywords}`;
          this.api.get(apiURL).subscribe((data: any) => {
            console.log(data);
            this.topics = data.list;
            if (this.trigger) {
            this.trigger.openMenu();
            }
         });
    } else {
        this.topics = [];
        this.trigger.closeMenu();
    }
}

Upvotes: 0

Views: 286

Answers (3)

Naveen
Naveen

Reputation: 356

Now I'm able to pass # .

onSearch(event: any) {
  const keywords = event.target.value;
  const params: any = {};
  if (keywords && keywords.length > 2) {
    params['filter[translations.title]'] = keywords;
    const options = {
      search: params
    };
    const apiURL = `abc/thg/hjy`;
    this.api.get(apiURL, options).subscribe((data: any) => {
      console.log(data);
      this.topics = data.list;
      if (this.trigger) {
        this.trigger.openMenu();
      }
    });
  } else {
    this.topics = [];
    this.trigger.closeMenu();
  }
}

Upvotes: 1

jozolo
jozolo

Reputation: 367

I think the value is getting set ok in apiURL in the line: 

const apiURL =`abc/thg/hjy?filter[file.name]=${keywords}`;

I think the problem is the following line, where you are passing the # (hashtag) without URL encoding it.

Try swapping out the hashtag with %23 before you use it in the next line - your get request.

See: How to escape hash character in URL

Upvotes: 0

SuperStar518
SuperStar518

Reputation: 2885

I notice that you have an missing in the HTML markup.

<input type="search" class="form-control" placeholder="Search file" (keyup)="onSearch($event)" [(ngModel)]="searchKeywords">

Then, in the .ts file:

onSearch(event: any) {
  ...
}

Upvotes: 0

Related Questions