react 纯前端实现数据分类、并可搜索

前言：

        一般像分类展示或者搜索功能，一般我们调后台接口就可以了，方便快捷。但是有时候还是需要我们纯前端来实现一下，数据分类，搜索功能啊，最近刚好做了这样一个小功能，主要用react.js实现，一起来看看吧。

功能描述：

        把无序的数据按英文字母排序显示，实现搜索分类不变

先看下实现的效果图：

数据结构例如：

/*
 * 对以下数据按字母顺序排序
 */
let fruit = [
             {  
                'name': '苹果',
                'value': 'Appel',
                'LienItems': [{
                    'itemName': '苹果派',
                    'itemValue': 'pgpai'
                }, {
                    'itemName': '苹果汁',
                    'itemValue': 'pgzi'
                }]
            }, {
                'name': '香蕉',
                'value': 'Bunana',
                'LienItems': [{
                    'itemName': '香蕉派',
                    'itemValue': 'xjpai'
                }]
            }, {
                'name': '啤酒',
                'value': 'Beer',
                'LienItems': [{
                    'itemName': '香蕉派',
                    'itemValue': 'xjpai'
                }]
            }, {
                'name': '梨子',
                'value': 'pear',
                'LienItems': [{
                    'itemName': '梨糕',
                    'itemValue': 'Lipai'
                }]
            }, { 
                'name': '香芋',
                'value': 'XiangYu',
                'LienItems': [{
                    'itemName': '香芋派',
                    'itemValue': 'xypai'
                }, {
                    'itemName': '香芋奶茶',
                      'itemValue': 'xyMilk'
                }, {
                    'itemName': '香芋蛋糕',
                    'itemValue': 'xycek'
                }]
            }
  ];

排序功能实现：

/*
  * 分类，并按英文字母排序
  */

    dataLetterSort = (fruit, field) => {
        fruit.map((item, index) => {
            item['checked'] = false;
            item.LienItems.map((itemLien, indexLien) => {
                itemLien['checked'] = false;
            });
        });
        let friutSrot = new Object();
        let arrTruefriut = [];
        let arrKey = [];
        for (let i = 0; i < fruit.length; i++) {
            let letter = (fruit[i][field]).substr(0, 1);  //截取第一个字母显示
            if (!(letter in friutSrot)) {
                friutSrot[letter] = new Array();
            }
            friutSrot[letter].push(fruit[i]);
        }
        for (let key in friutSrot) {
            arrKey.push(key.charCodeAt());  //将字母转化为Unicode
        } 
        arrKey.sort();     //排序
        let arrSort = [];
        for (let i = 0; i < arrKey.length; i++) {
            arrSort.push(String.fromCharCode(arrKey[i]));  //将Unicode转化为字母
        }
        for (let i = 0; i < arrSort.length; i++) {
            arrTruefriut.push(friutSrot[arrSort[i]]);
        }
        this.setState({
            friutSrot: arrTruefriut 
        });

    }

搜索功能实现：

   /**
    * 搜索关键词
    */
    getFriut = (key, arr) => {
        let arrTrueList = [];  // 匹配的数据
        let arrFalseList = []; // 不匹配数据
        arr.forEach((item) => {
            // 判断输入值key 是否存在对象数组上面
            if (this.loopObj(key,  item)) {
                item.showStatus = true;
                arrTrueList.push(item);
            } else {
                item.showStatus = false;
                arrFalseList.push(item);
            }
        });
        if (arrTrueList.length > 0) {
            this.dataLetterSort(arrTrueList, 'value');
        } else {
            this.dataLetterSort(arrFalseList, 'value');
        }
    }


    // 使用递归遍历所有属性判断是否 在对象里面匹配到值 借鉴js对象深拷贝的方式

    loopObj(searkey, obj) {
        let bool = false;
        let loop = (searkey, obj) => {
            for (let key in obj) {
                if (String(obj[key]).trim().indexOf(searkey) !== -1) {
                    bool = true;
                 }
                // 循环深一层对象
                // if (typeof obj[key] === 'object' && obj[key] !== null) {
                //     loop(searkey, obj[key]);
                // }
            } 
            loop(searkey, obj);
           return bool;
    }

好了，这样最关键的功能逻辑就有了！div 的布局这里就不写了。