Ionic4: the functionality of the searchbar results is not functioning correctly

Question

Ionic4: the functionality of the searchbar results is not functioning correctly

I have integrated the ion-searchbar in my application to filter a list of customers based on their first name and/or last name. However, I am facing two major challenges:

Challenge 1: The search bar currently only matches either the first name OR the last name of a customer, but not both simultaneously. For instance, if a customer's name is Marshall Legend and I type in Marshall, the filter works fine. Similarly, typing in Legend also yields results. But when I enter Marshall Legend, no matches are found.

Challenge 2: Let me explain this with an example scenario. Initially, the search feature works correctly by displaying only customers with the name "Marshall" when searched for. However, as soon as a new customer from another client is added to the list, all customers are displayed regardless of the filter, even though "Marshall" is still present in the search bar.

I have been struggling with these issues for quite some time now and any assistance would be highly appreciated. Below is a snippet of my code:

My component code

export class Tab2Page implements OnInit {
  public searchTerm: string = "";
  public customerCollection: AngularFirestoreCollection<any>;
  public customers: any[];
  public unfilteredCustomers: any[];

  constructor(private afs: AngularFirestore, 
    public modalController: ModalController,
    private databaseService: DatabaseService) {}

  ngOnInit(){
    this.customerCollection = this.afs.collection('Customers');
    this.customerCollection.valueChanges().subscribe( val => {
      this.customers = val;
      this.unfilteredCustomers = val;
    });
  }

  /**
   * Search functionality 
   */
  public onSearchTerm() {
    if(/\S/.test(this.searchTerm)){
      this.customers = this.unfilteredCustomers.filter(customer => {
        return customer.lastName.toLowerCase().includes(this.searchTerm.toLowerCase())  
        || customer.firstName.toLowerCase().includes(this.searchTerm.toLowerCase());
      });
    } else {
      this.customers = this.unfilteredCustomers;
    }
  }

My template code

    <ion-item-sliding *ngFor="let customer of customers">
          <ion-item-options side="start">
            <ion-item-option (click)="viewCustomerDetails(customer)">Details</ion-item-option>
          </ion-item-options>
        <ion-item>
         <ion-label>
         <ion-icon name="person"></ion-icon> {{customer?.firstName}} 
           {{customer?.lastName}}
         </ion-label>
         </ion-item>
          <ion-item-options side="end">
            <ion-item-option color="danger" (click)="removeCustomer(customer)">Return</ion-item-option>
          </ion-item-options>
    </ion-item-sliding>

javascript angular typescript ionic4

Answer 1

Answer №1

Solution 1

Here is a revised search logic:

If the first name or last name is equal to "legend", return true
If the first name or last name is equal to "marshall", return true
If the first name or last name is equal to "marshall legend", return true

Due to the split between first and last names in Firestore properties, the third scenario will never occur. Try implementing this alternative approach instead:

  public onSearchTerm() {
    if (searchTerms.length < 1) {
      this.customers = this.unfilteredCustomers;
      return;
    }

    const searchTerms = this.searchTerm.split(' ').map(s => s.trim().toLowerCase());

    this.customers = this.unfilteredCustomers.filter(customer => {
      var firstName = customer.firstName.toLowerCase();
      var lastName = customer.lastName.toLowerCase();

      var results = searchTerms.filter(name => firstName.includes(name) || lastName.includes(name));

      return results.length > 0;
    });

  }

Solution 2

In your ngOnInit function, you are subscribed to changes in your customers collection. When changes occur, it overwrites the this.customers variable and causes all results to be displayed. Consider implementing the following modification:

  ngOnInit(){
    this.customerCollection = this.afs.collection('Customers');
    this.customerCollection.valueChanges().subscribe( val => {
      this.unfilteredCustomers = val;

      // If there is a search term, filter the results
      if (this.searchTerm.trim().length > 0) {
        this.onSearchTerm();
      } else {
        this.customers = val;   
      }
    });
  }

Answer 2

Solution 1

Here is a revised search logic:

If the first name or last name is equal to "legend", return true
If the first name or last name is equal to "marshall", return true
If the first name or last name is equal to "marshall legend", return true

Due to the split between first and last names in Firestore properties, the third scenario will never occur. Try implementing this alternative approach instead:

  public onSearchTerm() {
    if (searchTerms.length < 1) {
      this.customers = this.unfilteredCustomers;
      return;
    }

    const searchTerms = this.searchTerm.split(' ').map(s => s.trim().toLowerCase());

    this.customers = this.unfilteredCustomers.filter(customer => {
      var firstName = customer.firstName.toLowerCase();
      var lastName = customer.lastName.toLowerCase();

      var results = searchTerms.filter(name => firstName.includes(name) || lastName.includes(name));

      return results.length > 0;
    });

  }

Solution 2

In your ngOnInit function, you are subscribed to changes in your customers collection. When changes occur, it overwrites the this.customers variable and causes all results to be displayed. Consider implementing the following modification:

  ngOnInit(){
    this.customerCollection = this.afs.collection('Customers');
    this.customerCollection.valueChanges().subscribe( val => {
      this.unfilteredCustomers = val;

      // If there is a search term, filter the results
      if (this.searchTerm.trim().length > 0) {
        this.onSearchTerm();
      } else {
        this.customers = val;   
      }
    });
  }

Answer 3

Answer №2

Here is an example of how you can utilize this:

public onSearchTerm() {
if(/\S/.test(this.searchTerm)){
  this.customers = this.unfilteredCustomers.filter(customer => {
    let fullname = customer.firstName+" "+customer.lastName
    return fullname.toLowerCase().includes(this.searchTerm.toLowerCase())  ;
  });
} else {
  this.customers = this.unfilteredCustomers;
}

}

The above code will only return either a matching first name or last name, not both

return customer.lastName.toLowerCase().includes(this.searchTerm.toLowerCase())  
    || customer.firstName.toLowerCase().includes(this.searchTerm.toLowerCase());

Answer 4

Here is an example of how you can utilize this:

public onSearchTerm() {
if(/\S/.test(this.searchTerm)){
  this.customers = this.unfilteredCustomers.filter(customer => {
    let fullname = customer.firstName+" "+customer.lastName
    return fullname.toLowerCase().includes(this.searchTerm.toLowerCase())  ;
  });
} else {
  this.customers = this.unfilteredCustomers;
}

}

The above code will only return either a matching first name or last name, not both

return customer.lastName.toLowerCase().includes(this.searchTerm.toLowerCase())  
    || customer.firstName.toLowerCase().includes(this.searchTerm.toLowerCase());

Ionic4: the functionality of the searchbar results is not functioning correctly

Answer №1

Answer №2

Similar questions

Use include files to wrap content in a div tag

"Sorry, but there seems to be an issue with

error message indicating modal is not appearing

What is the best way to pass data between sibling components using services?

Convert a JavaScript variable to a TypeScript interface

Using AJAX to transfer a variable from a range slider to a PHP query

Selecting multiple rows using a datakey

Is there a way to easily access the last element of an array in an Angular2 template without the need to iterate through the entire

Arrangement of populations within a component

Creating an Angular template using the Teams Toolkit within Visual Studio Code

Retrieve information using an AJAX call

Iterating through children of the target element using the .each() method in jQuery

Exploring the wonders of utilizing `instanceof` in TypeScript

Unable to function properly on Backbone.js, events have been rendered ineffective

Utilize jQuery to compare JavaScript files between the cache and the application

Using JavaScript to add a class when hovering over an element

What is the best way to find the product of each object in an array by the corresponding values in another array?

Having trouble accessing a custom factory within a directive in Angular using TypeScript

Require a Single Error Message When Two Fields Are Left Blank

Sending JSON data using Ajax with circular reference