【干货】原生js做的一维数组对象，二维数组对象的模糊查询（前端网备份）

最重要的是二维数组

小程序通讯录(student)

后台的数据格式

wxml

<input bindconfirm="search" bindinput="bindinput" confirm-type="搜索" class="wxSearch-input" placeholder="姓名" />

js

正式版顺序搜索算法
先来说几个坑:
1>比如 var field = "user";
item.field 就会报错，写法只能为item[field]
2>比如type为number的时候，管理员没有这个number字段，所以
item[field][i][type[j]].indexOf(value)就会报错，所以要再上面判断一层，underfind的时候把他绕过去，增加一条
if (item[field][i][type[j]] != undefined || item[field][i][type[j]] != null)

/*二维数组对象模糊搜索
  dataList 为二维数组数据结构
  value 为input框的输入值
  type 为指定想要搜索的字段名，array格式 ["name", "number"];
  field 为二维数组的字段 比如二维数组字段名为user
 */
function filterData(dataList, value, type, field) {
  var s = dataList.filter(function(item, index, arr) {
    for (let i = 0; i < item[field].length; i++) {
      for (let j = 0; j < type.length; j++) {
        console.log(item[field][i][type[j]]);
        if (item[field][i][type[j]] != undefined || item[field][i][type[j]] != null) {
          if (item[field][i][type[j]].indexOf(value) >= 0) {
            var arr2 = [];
            var s = item[field].filter(function(items, indexs, arrs) {
              if (items[type[j]].indexOf(value) >= 0) {
                arr2.push(items);
                return arr2;
              }
            })
            item.user = s;
            return item;
          }
        }

      }
    }
  });
  return s;
}

第一版有点缺陷的算法

  bindinput: function (options) {
    var value = options.detail.value;
    value = value.replace(/^s+|s+$/g, "");
      this.setData({
        value: value
      })
  },
 search(e) {
    var value = this.data.value;
    var type = ["name","number"];
    if (value == "") {
      console.log("我是空");
      this.getData(this.data.id, this.data.type, "");
    }
    var li = this.filter(this.data.group, value, type);
//这里为搜索不到值得时候返回得空数组，就让他重新查一次
    console.log(li);
    if (li.length == 0) {
      this.getData(this.data.id, type, "");
    } else {
      this.setData({
        group: li
      })
    }
  },
//重头戏来了
/*dataList为上图图片得后台数据结构;
  value为input输入值;
  type为想查询得类型，比如name,number字段*/
  filter: function (dataList, value, type) {
    var s = dataList.filter(function (item, index, arr) {
        //item返回得是一维数组结构
        //下面遍历二维user数组对象
        for (let i = 0; i < item.user.length; i++) {
          //遍历type数组对象,判断下来要筛选的字段
          for (let j = 0; j < type.length; j++){
            //判断二维数组里面得name或者number得值里面包含value不；如果不包含返回-1就不继续执行
            if (item.user[i][type[j]].indexOf(value) >= 0) {
              var arr2 = [];
              //items返回得是二维数组结构得字段
              var s = item.user.filter(function (items, indexs, arrs) {
                //判断二维数组里面得name或者number得值里面包含value不；如果不包含返回-1就不继续执行
                //然后把二位里面得多个对象结果都存到新数组arr2去
                //然后返回二维得s过滤器
                if (items[type[j]].indexOf(value) >= 0) {
                  arr2.push(items);
                  return arr2;
                }
              })
              //这里得s得值为arr2，因为item为一维过滤器，实际在遍历种
              //所以item.user可以返回当前所对应得那一条数组，改变里面得二维值，为需要的
              item.user = s;
              //返回item，为过滤器筛选好了的给上一层s
              return item;
            }
          }
        }
    });
    //返回到search里面得li去接收
    return s;
  },

遇到的深坑

下图原因是因为没有加

if (items[type[j]].indexOf(value) >= 0) {}

下图原因是因为没有加

if (item.user[i][type[j]].indexOf(value) >= 0) {}

一维数组:

正式版一位数组:

var type = ["name", "id"];
    var dataList = [
      { name: "蓝有",number: "1" },
      { name: "蓝天", number: "2" },
      { name: "李天一", number: "3" },
      { name: "懒", number: "4" },
    ]
    var value = "天";

/*一维数组对象模糊搜索
  dataList 为一维数组数据结构
  value 为input框的输入值
  type 为指定想要搜索的字段名，array格式 ["name", "number"];
 */
function filterOne(dataList, value, type) {
  var s = dataList.filter(function(item, index, arr) {
    console.log(item)
    for (let j = 0; j < type.length; j++) {
      if (item[type[j]] != undefined || item[type[j]] != null) {
        if (item[type[j]].indexOf(value) >= 0) {
          return item;
        }
      }
    }
  });
  return s;
}

var list = ["蓝有","蓝天",'李天一',"懒"];
        var list = [
            {name:"蓝有",id:1},
            {name:"蓝天",id:2},
            {name:"李天一",id:3},
            {name:"懒",id:4},
        ]
        var len = list.length;
        var arr = [];
        for(var i=0;i<len;i++){
            //如果字符串中不包含目标字符会返回-1
            if(list[i].name.indexOf("天")>=0){
                console.log(list[i]);//{name: "蓝天", id: 2}   
          //{name: "李天一", id: 3}
                arr.push(list[i]);
            }
        }
        console.log(arr) ;
            //[0: {name: "蓝天", id: 2}
            //1: {name: "李天一", id: 3}]