Using a pipe filter to implement a search feature in an Ionic search bar

Hey everyone, I'm facing a little issue here. I created a pipe filter to sort through some data, but now I need to include two more filters and I'm not sure how to go about it within this pipe. Below is an example of the pipe I have created:

/*** CUSTOM PIPE ***/

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(data: any, search: []): any {

    if (search === undefined) { return data }
    return data.filter(function(item){
      Here, I need to filter by item?.city and item?.age
      return item?.title?.includes(search)
    })
  }

}
/*** HTML ***/

<ion-searchbar [(ngModel)]="search" name="search"></ion-searchbar>

Answer №1

Insert this HTML code snippet into your webpage

<ion-searchbar color="light" class="ion-no-padding" [(ngModel)]="searchData" mode="ios"
        [placeholder]="'Search '+pageName">
      </ion-searchbar>

<ion-row *ngFor="let item of checkContent | filterData : ['city','age'] : searchData">
</ion-row>

Implement this code in the Filter Pipe script section

transform(items: any[], field: any[], value: string): any[] {
        if (!items || !value || !field) {
          return items;
        }
    
        let lowSearch = value.toLowerCase();
        return items.filter((item) => {
          return field.some(key =>
            String(item[key]).toLowerCase().includes(lowSearch)
          );
        });
      }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Each time my classes are initialized, their components undergo reinitialization

Apologies if the question is not well-formed, I am completely new to working with React. I have been attempting to create a dashboard but encountering issues with my states getting reinitialized. Below is the content of my app.js file. import './inde ...

Executing a function immediately upon the start of a new month in JavaScript (Node.js) without relying on any external libraries?

Is it possible to automate the process of creating a document in MongoDB using Mongoose every 1st of a new month, ideally as soon as the date changes without relying on third-party libraries like needle or cronjob? Can this be achieved solely with setInter ...

Guide on triggering a modal upon receiving a function response in React

I am looking for a way to trigger a function call within a response so that I can open a modal. Currently, I am utilizing Material UI for the modal functionality. Learn more about Modals here The process involves: Clicking on a button Sending a request ...

Issue with Angular controller failing to load when link is clicked

I am currently developing a webpage that incorporates Angular and responds to ajax requests by populating data into a table. When I manually enter the address, everything works as expected. However, if I navigate to the page using a link ( <a href="/pro ...

Are there any other methods of using HREF in an <asp:Button> besides OnClientClick for invoking an inline div?

I decided to create a concealed <div> on the same page and tried calling it with href="#", which worked perfectly. However, when I attempted to use the same code in ASP.net, I encountered some issues with Javascript or other factors that prevented it ...

How to access previous Redux state when navigating back using the Back button

Imagine a search page equipped with a search bar and various filters for the user to customize their data retrieval. As the user selects different filters, an API call is made to fetch updated data and the route path is also adjusted accordingly. However ...

Issue encountered: Upon executing 'ng add @angular/fire', an error was detected in the node_modules/firebase/compat/index.d.ts file while attempting to launch the Angular application

Recently, I decided to integrate Firebase into my project, but encountered a persistent error after installing the firebase module 'ng add @angular/fire' and running it with 'ng serve': Error: node_modules/firebase/compat/index.d.ts:770 ...

Stopping a parent's event from firing when clicking on child elements without interfering with the child element events

Having read several posts such as this one, I am exploring a method to click on the parent div for it to hide, without hiding when clicking on either the search box or the 'click for event 2' text. I have tried using onclick stop propagation to ...

Utilize a function on specific attribute values

I have a function in JavaScript that is designed to convert all relative URLs into absolute URLs. function rel2Abs(_relPath, _base); //_relPath represents the relative path //_base indicates the base URL Now, my objective is to implement this function on ...

What steps do I need to follow in order to properly execute this HTTP request?

Recently, I came across this amazing tool called SimplePush.io that is perfect for one of my projects. It works flawlessly via curl, as shown on their website: ~ $ curl 'https://api.simplepush.io/send/HuxgBB/Wow/So easy' or ~ $ curl --data &ap ...

The successful conversion of Typescript to a number is no longer effective

Just the other day, I was successfully converting strings to numbers with no issues. However, today things have taken a turn for the worse. Even after committing my changes thinking all was well, I now find that when attempting to cast in different ways, I ...

The error message "Uncaught ReferenceError: req is not defined with [email protected]" indicates that the variable

Discovered a helpful post that seems to address the problems. https://github.com/angular/angular-cli/issues/8359 I'm unsure about the steps to take next to resolve this issue. Can anyone clarify? Could you please advise on which version of Angular ...

What is the process for sending a request and obtaining a response from a REST API using JavaScript?

I have a private server set up on my computer with a built-in REST API. The base URL for the API is: . I am now looking to develop a client application for this server using the API. To authenticate on the server, the API endpoint is baseurl/login with the ...

Encountering issues during the installation of node modules

An error log is displayed below: 1027 error gyp verb check python checking for Python executable "python2" in the PATH 1027 error gyp verb `which` failed Error: not found: python2 1027 error gyp verb `which` failed at getNotFoundError ...

Challenges with creating a contact form using bootstrap modal

I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong? On iPad, the modal is positioned to the right and down the page instead of in the cente ...

Service in Angular2+ that broadcasts notifications to multiple components and aggregates results for evaluation

My objective is to develop a service that, when invoked, triggers an event and waits for subscribers to return data. Once all subscribers have responded to the event, the component that initiated the service call can proceed with their feedback. I explore ...

I noticed that my regular expression is functioning correctly on regex101, but for some reason, it's

My search works perfectly on regex101 using this link: https://regex101.com/r/z8JCpv/1 However, in my Node script, the third matched group array[2] is returning not only the matching text but also everything following it. An example line from the source ...

EJS: Dynamically linking CSS and JS files according to specific page conditions

Is there a way to conditionally call CSS/JS files based on specific page conditions in EJS? Can we use a flag from the router or base it on the URL in the EJS file? Note: The code below works perfectly when accessing the /editor page, but it will cause er ...

Troubleshooting issue with Ionic FilePath: How to retrieve file path in Android 11

Recently, I've been looking into the changes in the Android file system due to the release of Android 11. Currently, I am encountering an issue with opening a file using the Android File Chooser from within my Ionic app. https://ionicframework.com/do ...

What sets Angular 2/4 apart is the synchronous nature of Reactive forms, contrasting with the asynchronous behavior of template-driven forms

While looking through the documentation on angular.io, specifically about reactive forms being synchronous (Reactive forms are synchronous), I found myself struggling to grasp the concept of how reactive forms differ from template-driven forms in terms of ...