如何根据搜索从 Firebase 中检索数据？答案

【问题标题】：How to retrieve data from Firebase according to the search?如何根据搜索从 Firebase 中检索数据？
【发布时间】：2017-10-14 13:36:08
【问题描述】：

在我的 ionic 2 应用程序中，我将一些信息推送到 Firebase 的实时数据库，在另一个页面中我想根据搜索检索该数据。

这是我的 Firebase 参考的样子：

---Bloods

     -----id

这是我的search.html，我不想显示加载屏幕，而是列出所选数据（例如A rh+，女性）

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>
      Search
    </ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>


  <ion-list>
  <ion-item>
    <ion-label>Blood Type</ion-label>
    <ion-select [(ngModel)]="bloodtype">
      <ion-option value="ap">A Rh+</ion-option>
      <ion-option value="an">A Rh-</ion-option>
      <ion-option value="bp">B Rh+</ion-option>
      <ion-option value="bn">B Rh-</ion-option>
      <ion-option value="abp">AB Rh+</ion-option>
      <ion-option value="abn">AB Rh-</ion-option>
      <ion-option value="zp">0 Rh+</ion-option>
      <ion-option value="zn">0 Rh-</ion-option>
    </ion-select>
  </ion-item>



<ion-item>
    <ion-range min="0" max="100" [(ngModel)]="range" color="secondary">
      <ion-label range-left>0km</ion-label>
      <ion-label range-right>100km</ion-label>
    </ion-range>
  </ion-item>

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="male">Male</ion-option>
    <ion-option value="female">Female</ion-option>
  </ion-select>
</ion-item>



</ion-list>

<button ion-button full icon-left (click)="presentLoading()">
  <ion-icon name="search"></ion-icon>
  Search
</button>



</ion-content>

我怎样才能做到这一点？

【问题讨论】：

你是否实现了搜索功能？
@niveshshastri 我没有
我会给你我的演示代码来实现搜索功能
@niveshshastri 谢谢，你能简单解释一下代码吗？
在我的代码中，当任何人键入此过滤器将调用的单词时，我定义了一个过滤器名称为“myFilter”。根据您的要求，在此处编写获取数据的 Firebase 代码。由于数组，您可以在 var c = x[i] 中获取单词。

标签： firebase ionic-framework firebase-realtime-database ionic2

【解决方案1】：

这是搜索功能的演示代码，我为此使用了 angular.js。根据您的要求编辑此代码。

HTML 文件：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

  <div ng-app = "myApp" ng-controller = "myCtrl">

  <br>
  <br>

  Enter text for search in table : <input type="text" placeholder="enter text here" ng-model = "test.name">

  <br>
  <br>


 <table border="1" width="100%" >

   <tr>

    <td align="center">Name</td>

    <td align="center">Work</td>

   </tr>

  <tr  ng-repeat  = 'x in names | filter : test.name | filter : test.work'>

      <td >{{x.name | myFilter}}</td>

      <td >{{x.work | myFilter}}</td>

  </tr>

 </table>


  </div>

<script src = "JS.js">

</script>

</body>
</html>

控制器文件：

var app = angular.module("myApp",[]);

app.controller("myCtrl",function($scope){

  $scope.names = [{name : 'Nivesh',work : 'fokta'},
  {name : 'hello',work : 'personal'},
  {name : 'nivesh',work : 'marketiing'},
  {name : 'dinesh',work : 'finance'},
  {name : 'kali',work : 'business'},
  {name : 'lalu',work : 'wood'},
  {name : 'kaliya',work : 'iron works'},
  {name : 'gabbar',work : 'NGo'}

  ];

});


app.filter('myFilter', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});

【讨论】：