ionic开发——完整搜索功能的实现方法

本文主要实现搜索功能及清空搜索内容的实现方法。

在angularjs中，我们的列表基本都是遍历的一个对象数组来显示出来的，那么我们的搜索功能也就在这个基础上来实现。

那就假设我们有一个事先显示的对象数组ItemArr1=[];

然后有一个输入关键字搜索后要显示的另一个对象数组ItemArr2=[];

HTML代码如下：

搜索功能的JS代码如下：

        $scope.searchCont = {};//搜索内容
        $scope.ItemArr2 = []; //搜索后页面遍历显示的数组
        $scope.search = function(){
            $scope.ItemArr2 = []; //每次搜索先清空数组内容
            var searchValue = document.getElementById('search').value;
            for(var i=0;i<$scope.ItemArr1.length;i++){
                var num = i;
                for(var j=0;j<$scope.ItemArr1[num].name.length;j++){
                    var Name1 = $scope.ItemArr1[num].name.charAt(j);
                    for(var k=0;k

清空搜索内容的JS代码：

        $scope.clearSearch = function(){
            $scope.searchCont = {};
            $scope.ItemArr2 = [];
        }

注： 在label中的input不能嵌入按钮，因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框，注意ng-model需要是一个对象才能置空,变量不行。

搜索功能调用键盘搜索键的实现方法可以看另一篇文章：  ionic开发——调用键盘搜索功能实现方法

地址：http://blog.csdn.net/yu17310133443/article/details/52595392点击打开链接