微信小程序搜索

微信小程序搜索

js:

data: {

// 数据源

source:[

  "vivo x7",

  "vivo x9",

  "vivo x21",

  "vivo s7",

  "vivo s9",

  "vivo s21",

  "vivo s29"

],

// 搜索结果

ret:[],

// 延时标识

timer:null

  },

  // 输入搜索词

  search(evt){

    // 清除之前动画

    clearTimeout(this.data.timer);

    this.data.timer=setTimeout(()=>{

      // 录入信息

      let value=evt.detail.value;

      if(value==''){

        this.setData({ret:[]})

        return;

      };

      // 数据源

      let source=this.data.source;

      // 定义正则

      let reg=new RegExp(value);

      let ret=[];

      // es6提供

      ret=source.filter((item,key)=>{

        return st(item);

      })

      this.setData({ret})

    },800)

  },

页面渲染：

<view >

<input placeholder="请输入要搜索的值" type="search" bindinput="search"/>

</view>

<view >

    <block wx:for="{{ret}}" wx:key="ret">

        <view>{{item}}</view>

    </block>

</view>

样式：

input{

    width: 100%;

    height: 100rpx;

    line-height: 100rpx;

    border: 1rpx solid aqua;

    border-radius: 20%;

}