Autocomplet is not working with two values at the same time in Angular?

user_16309201 0
Viewed 58

Trying to Autocomplete textbox with two values - i.e. Publication and city but autocompletes is only working to publication not city. like you can see in image blow test is publication and Delhi is city but it only work till publication if I enter publication and city together is not working

example: if i enter test, it will show test but when i search test -delhi exactly same it won't show test -delhi from autocorrect.

interface

component.html

<div class="form-field col-lg-12 ">
<label class="label" for="company">Publication</label>

<input [(ngModel)]="pubTitleKeyUp" (ngModelChange)="keyUpPublication(pubTitleKeyUp)" name="pub"
    class="input-text js-input" type="text" required autocomplete="off">

<div class="search-result" *ngIf="publications" style="max-height: 120px;">
<ul style="margin:0; padding:5px;">
<li *ngFor="let pub of publications">
<a (click)="onClickPublication(pub)"> {{ pub.Title }} -{{ pub.city }} </a>
                    </li>
                </ul>
            </div>

        </div>

component.ts

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

  onClickPublication(pub: IPub) {
    this.pubTitleKeyUp = pub.Title + '-' + pub.city;
    this.selectedPub = pub
    this.publications = []
  }
angular autocomplete
1 Answers

The issue is with your filter. You are filtering only on title and not on city. If you are searching in format of your li text then I would suggest following

 this.publications = this.allPubs.filter(p => {
  let title = p.Title + '-' + p.city;
  return title.toLowerCase().includes(k.toLowerCase());
})
user_56292570
Related