在Ionic框架中使用搜索功能

Question

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

Answer 1

首先,您必须安装插件.您可以使用凉亭:

bower install ionic-filter-bar --save

它将复制内部文件夹中的所有javascript和css所需. libwww

然后,您必须将对index.html的引用添加css到:

<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>

你必须jett.ionic.filter.bar为主模块注入模块:

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

并且您必须$ionicFilterBar在控制器中引用该服务:

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

    });

现在你可以开始使用它了.

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

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

该动作在我的控制器中触发事件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.

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

我们将使用它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并返回一些我们可以绑定到对象数组的数据:

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

这里有另一个傻瓜.

PS:

如果要使用某种自定义进行配置,则必须使用提供程序在配置中进行配置$ionicFilterBarConfigProvider:

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

PPS:

在我的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展示它是如何工作的.