当前页面实现简单搜索功能

最新推荐文章于 2023-01-04 00:30:41 发布

美的人是吃货

最新推荐文章于 2023-01-04 00:30:41 发布

阅读量6.3k

点赞数 2

分类专栏：小程序文章标签：小程序搜索

本文链接：https://blog.csdn.net/ITLISHUANG/article/details/84892840

版权

小程序专栏收录该内容

20 篇文章 0 订阅

订阅专栏

功能描述：在搜索框中输入内容，在渲染出的网络数据中取出带输入关键字的内容，单独显示

功能实现：

1.index.wxml:循环一个数组

<view class='preson'>
  <input bindinput="personTap" type="text" placeholder-style="color:#999;font-size:12px;text-align:center;" placeholder="搜索联系人" />
</view>
<block wx:for="{{phonename}}">
  <view class='numbername'>
    <text>{{item.name}}</text>
    <text>{{item.phone}}</text>
  </view>
</block>

2.index.wxss:样式


.preson {
  width: 80%;
  height: 80rpx;
  border: 1px solid #ccc;
  padding-left: 20px;
  padding-top: 20rpx;
  margin: 30px;
}

.numbername {
  height: 100rpx;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-right: 40rpx;
}

3.index.js:逻辑代码

data: {
    // 加载网络数据放在此数组中，本例中放入的是死数据，仅供参考
    contacts: [{
        id: 0,
        name: '熙妈妈',
        phone: 18238001932
      },
      {
        id: 1,
        name: '熙爸爸',
        phone: 15503869486
      }
    ],

    phonename: [],//此处的数组 是页面中循环的数组
  },

  onLoad: function(options) {
    var that = this;
    // 获取网络数据 成功后 赋值给phonename  此处单纯的赋值！！！
    that.setData({
      phonename: that.data.contacts
    })
  },
  // 搜索联系人
  personTap: function(event) {
    let value = event.detail.value; //获取input框中的内容
    let contacts = this.data.contacts; //得到网络数据存放的数组
    let array = []; //新定义一个数组
    for (var i = 0; i < contacts.length; i++) { //循环网络数据存放数组
      if (contacts[i].name.indexOf(value) != -1) { //判断输入的内容在这个数组中的.name.indexOf()是否等于-1
        array.push(contacts[i]) //不等于-1就添加到新数组
      }
    }
    this.setData({ //跳出循环后，新数组赋值给页面循环的数组，实现搜索功能
      phonename: array
    })
  },

注：出错请复现具体错误！