ionic-framework - 在 Ionic 框架中使用搜索功能

Question

我是一个 UI 人，对 ionic 框架非常陌生。我想在我使用 Ionic 框架构建的 android 应用程序中添加搜索功能。经过研究，我发现我需要使用这个插件 https://github.com/djett41/ionic-filter-bar .但没有可用的详细文档。任何人都可以指导如何使用这个插件工作。我已经完成了所有设置，但坚持使用实际代码。

Answer 1

首先，您必须安装插件。您可以使用凉亭为了那个原因:

bower install ionic-filter-bar --save

它会复制所有的 javascript和 css lib 中需要 www 内的文件夹.

然后您必须添加对 css 的引用。给您的 index.html :

<link href="lib/ionic-filter-bar/dist/ionic.filter.bar.css" rel="stylesheet">

javascript 也一样:

<script src="lib/ionic-filter-bar/dist/ionic.filter.bar.js"></script>

您必须注入(inject)模块 jett.ionic.filter.bar你你的主要模块:

var app = angular.module('app', [
        'ionic',
        'jett.ionic.filter.bar'
    ]);

并且您必须引用服务 $ionicFilterBar在您的 Controller 中:

angular.module('app')
        .controller('home', function($scope, $ionicFilterBar){

    });

现在您可以开始使用它了。

在我的示例中，我想在用户单击/点击标题中的图标时触发搜索框。我会将此 HTML 添加到 View 中:

  <ion-nav-buttons side="secondary">
    <button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()">
    </button>
  </ion-nav-buttons>

该操作在我的 Controller 中触发了一个事件 showFilterBar :

  $scope.showFilterBar = function () {
    var filterBarInstance = $ionicFilterBar.show({
      cancelText: "<i class='ion-ios-close-outline'></i>",
      items: $scope.places,
      update: function (filteredItems, filterText) {
        $scope.places = filteredItems;
      }
    });
  };

创建 $ionicFilterBar并显示它。

正如你在这里看到的，我正在使用一个对象数组 $scope.places

$scope.places = [{name:'New York'}, {name: 'London'}, {name: 'Milan'}, {name:'Paris'}];

我已链接到 items我的 $ionicFilterBar 的成员.更新方法会给我 filteredItems过滤的项目(地点)。

你可以玩这个 plunker .

另一种选择是使用插件通过 $http 远程获取一些数据。 .

如果我们想实现这一点，我们可以再次使用更新功能。
现在我们不需要将项目绑定(bind)到我们的对象数组，因为我们不需要过滤的元素。

我们将使用 filterText执行一些操作:

  $scope.showFilterBar = function () {
    var filterBarInstance = $ionicFilterBar.show({
      cancelText: "<i class='ion-ios-close-outline'></i>",
      // items: $scope.places,
      update: function (filteredItems, filterText) {
        if (filterText) {
            console.log(filterText);
            $scope.fetchPlaces(filterText);
        }
      }
    });
  };

我们将调用另一个函数，它可能会调用 $http并返回一些我们可以绑定(bind)到我们的对象数组的数据:

 $scope.fetchPlaces = function(searchText)
  {
    $scope.places = <result of $http call>;
  }

另一个笨蛋 here .

PS:

如果您想使用某种定制来配置它，您必须在您的配置中使用提供程序 $ionicFilterBarConfigProvider 进行配置。 :

angular.module('app')
    .config(function($ionicFilterBarConfigProvider){
        $ionicFilterBarConfigProvider.clear('ion-ios-close-empty');
    })

PP:

在我的 plunker 中，我包含了 css和 script直接从源头复制过来。

更新 :

有人要求不要用更新的列表替换列表。
我的廉价而肮脏的解决方案是检查 filterText包含一些值。如果它是空的(没有搜索)，我们遍历每个元素并设置一个属性 found = false否则我们比较 places数组我们 filteredItems大批。
匹配的元素将被标记为已找到。

  function allNotFound(filteredItems) {
    angular.forEach($scope.places, function(item){
      item.found = false;
    });
  }

  function matchingItems(filteredItems) {
    angular.forEach($scope.places, function(item){
        var found = $filter('filter')(filteredItems, {name: item.name});
        if (found && found.length > 0) {
            console.log('found', item.name);
            item.found = true;
        } else {
          item.found = false;
          console.log('not found', item.name);
        }
    });

现在我们可以通过这种方式集成过滤栏:

 $scope.showFilterBar = function () {
    var filterBarInstance = $ionicFilterBar.show({
      cancelText: "<i class='ion-ios-close-outline'></i>",
      items: $scope.places,
      update: function (filteredItems, filterText) {
          if (!filterText) {
              allNotFound();
          } else {
            matchingItems(filteredItems);
          }
      }
    });
  };

我们可以使用 found对象的属性来改变元素的样式。

与往常一样， Plunker展示它是如何工作的。