如何在Ionic Ecommerce App中应用产品搜索

Question

我正在开发Ionic电子商务应用程序，并且该应用程序中有很多产品要显示，但是我对Ionic App中的产品搜索不熟悉。因此，我进行了很多搜索，并在Ionic中获得了搜索栏。

这是我的front.html：我已经添加了搜索栏。

<ion-searchbar [(ngModel)]="mysInput" (ionInput)="setSearchProducts($event)">
</ion-searchbar>

这是我在其中提取产品的 front.ts ：

   searchproduct: any = [];
   mysInput: string;

    getsearchproducts()
  {
    this.restProvider.getproductsforsearch()
      .then(data => {
      this.searchproduct = data;
      console.log(this.searchproduct.msg);
      });
  }

  setSearchProducts()
  {
    this.searchproduct.filter(searproduct => {
      return searproduct.product_name.includes(this.mysInput);
    });
  }

控制台是一系列产品。因此，我想使用产品名称来搜索这些产品。非常感谢您的帮助。

Answer 1

这是您需要的非常粗略的实现：

$category = Categories::where('latin_url', $latin_url)->firstOrFail();

Stackblitz：https://stackblitz.com/edit/angular-ytzuon?file=src%2Fapp%2Fkeyup.components.ts

Answer 2

<ion-searchbar (input)="getItems($event)"></ion-searchbar>
<ion-list>
    <ion-item *ngFor="let item of searchProducts">
        {{ item.product_name }}
    </ion-item>
</ion-list>


public allProducts = [];
public searchProducts = [];


constructor() {
    this.getsearchproducts();
}

getsearchproducts(){
    this.restProvider.getproductsforsearch()
      .then((data) => {
        this.allProducts = data;
      });
  }

getItems(searchbar) {
    this.searchProducts = [];

    var query = searchbar.target.value;
    if (query.trim() == '') {
      return;
    }

    this.searchProducts = this.allProducts.filter((value)=> {
      if (value.product_name.toLowerCase().indexOf(query.toLowerCase()) > -1) {
        return true;
      }
      return false;
    })
}