Angular (keyup) event not detecting only # symbol

Question

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

base @,
base $,
base 1,
base #,
base 2,

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();
    }
}

It should not happen, probably you missed `"` after keyup event attribute `(keyup)="onSearch($)"` — Pankaj Parkar, May 17 '19 at 10:33
@PankajParkar that wasnt the issue. it works fine for other special symbols. — Naveen, May 17 '19 at 10:35
There is nothing wrong with code. It is problem with # because it is used to delimit a URI from a fragment identifier in URI. Thus, the character "#" should be excluded in that are passed in the URL. So base will be treated as null — Abhay, May 17 '19 at 10:39
@techyaura so there is no way that i can pass # in the URl?? — Naveen, May 17 '19 at 10:42

Naveen · Accepted Answer · 2020-11-19T08:56:54.273

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();
  }
}

score 0 · Answer 2 · answered May 17 '19 at 10:34

0

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) {
  ...
}

answered May 17 '19 at 10:34

SuperStar518

2,814
2
20
35

D that wasnt the issue. i have edited my question now. can you check now. – Naveen May 17 '19 at 10:39

score 0 · Answer 3 · answered May 17 '19 at 11:42

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

Angular (keyup) event not detecting only # symbol

3 Answers3