微信小程序:仅前端实现对象数组的模糊查询

效果

核心代码

//对数组进行过滤,返回数组中每一想满足name值包括变量query的

let result = array.filter(item => {

return item.name.includes(query);

});

完整代码

wxml

html 复制代码
<input type="text" placeholder="请输入名称" placeholder-style="color:black" bindconfirm="search" />
<view class="all">
  <view class="item_all" wx:for="{{info}}" wx:key="index">
    <view class='position'>
      <view class="content">
        <view class="vv_1">序号:{{item.id}}</view>
        <view class="vv_1">名称:{{item.name}}</view>
        <view class="vv_1">年龄:{{item.age}}</view>
      </view>
    </view>
  </view>
</view>

wxss

css 复制代码
/* 搜索框 */
input {
  background-color: rgb(212, 212, 212);
  padding: 2%;
  margin-bottom: 5%;
}

/* 列表 */
.all {
  margin-bottom: 20%;
}

.item_all {
  /* border: 1px solid black; */
  margin-bottom: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.position {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 95%;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 2px 2px 2px gainsboro;
}

.content {
  padding: 5%;
}

.vv_1 {
  word-break: break-all;
  padding: 2px 0;
}

js

javascript 复制代码
Page({
  data: {
    //完整数据
    fixed_info: [{
      id:1,
      name:'张三',
      age:23
    }, {
      id:2,
      name:'李四',
      age:26
    }, {
      id:3,
      name:'王五',
      age:24
    }, {
      id:4,
      name:'张晓',
      age:21
    }], 
    //展示数据
    info:[],
  },
  //刚进入页面执行的操作
  onLoad(options) {
    this.setData({
      info:this.data.fixed_info
    })  
  },
  //搜索框回车事件
  search(event) {
    //始终保持查询的数据是完整的数组数据
    this.setData({
      info:this.data.fixed_info
    })
    let query = event.detail.value; // 要查询的关键词
    let array = this.data.info;//设置查询的数组
    let result = array.filter(item => {
      return item.name.includes(query);
    });
    this.setData({
      info:result
    })
  },
})
相关推荐
excel2 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel3 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼4 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping4 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙5 小时前
[译] Composition in CSS
前端·css
白水清风5 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix5 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278005 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端5 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧5 小时前
Promise 的使用
前端·javascript