小程序van-popup组件实现模糊搜索，后选择功能

瑞晟技术服务中心-耿瑞

已于 2023-08-01 21:02:37 修改

阅读量5.4k

点赞数 2

文章标签： javascript html5 html

于 2021-10-19 16:37:55 首次发布

这篇博客介绍了如何利用VantWeapp框架为小程序开发一个具备搜索功能的下拉选择框。首先导入必要的组件，然后通过调用API获取数据并进行处理，以满足van-picker的需求。接着，设置了开启、关闭控件以及用户选择和搜索事件的处理函数。在搜索功能中，利用toLowerCase()实现不区分大小写的匹配，并动态更新选项。最后，修改了UserIdentification事件以避免出现错误。整个过程详细展示了搜索控件的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着WEB前端的发展，现在大部分的前端工程师都已经走上了小程序开发的征程，不管是PC端还是手机端，选择一款优秀框架对项目开发都是至关重要的，个人比较喜欢的小程序框架是Vant Weapp
那么今天我们就看看选择下拉框且带有搜索功能的框怎么去实现，其实Vant本身的选择下拉控件是没有索索功能的需要我们手工合成一个
json中我们导入必要的控件

{
   "usingComponents": {
     "van-search": "vant-weapp/search",
     "van-popup": "vant-weapp/popup",
     "van-picker": "vant-weapp/picker"
   }
 }

然后我们调请求去那要用户选择的数据列表
这一步就不用我教了吧

 CustomerGetAllList({
}).then((src) => {
   let list = src.data.data;
   for(let i = 0;i < list.length;i++){
     list[i].text = list[i].customerName;
     list[i].disabled = false
   }
   this.setData({
     UserList: list
   })
 })

刚从后端拿回的数据自然是有必要处理一下的，因为van-picker要求数据是
一个对象数组然后每一个下标对象要有一个text对象作为选项名称有一个
disabled作为默认选中状态
然后我们在data中设置UserSwitch变量默认值位false 作为这个控件的开关
然后我们需要在js中添加几个事件

  //开启控件
 UserOn: function(){
    this.setData({
      UserSwitch: true
    })
  },
  //关闭控件
   UserShutdown: function(){
    this.setData({
      UserSwitch: false
    })
  },
  //用户选择某个选项后触发事件
  UserIdentification(event){
	    console.log(event.detail.value.id);
  },

WXML

<van-popup
  show="{{ UserSwitch }}"
  closeable
  position="bottom"
  custom-style="height: 45%"
  bind:close="UserShutdown"
>
   <van-picker
      show-toolbar
      wx:if = "{{ UserList.length != 0 }}"
      title="请选择库位"
      columns="{{ UserList }}"
      bind:cancel="UserShutdown"
      bind:confirm="UserIdentification"
   />
</van-popup>

然后当我们触发UserOn事件后就会出现这样的效果
在这里插入图片描述
选择某个选项后点击确定也会打印在控制器上，可以根据自己的情况修改选择确定后的那个UserIdentification事件
然后在data中设置UserNameIndexes 默认值为空字符
作为搜索条件

//条件输入事件
 setUserNameIndexes(event){
    this.setData({
      UserNameIndexes: event.detail,
    });
  },

在data中声明UserBackups备份UserList的数据
在最初请求给UserList负值位置编写

CustomerGetAllList({
}).then((src) => {
   let list = src.data.data;
   for(let i = 0;i < list.length;i++){
     list[i].text = list[i].customerName;
     list[i].disabled = false
   }
   this.setData({
     UserList: list,
     UserBackups: list
   })
 })

在data中声明cognizance默认值为空字符

//点击确定搜索时触发事件
  UserVague: function(){
    wx.showToast({
      title: '加载中',
      icon: "loading",
      duration: 1000
    })
    let row = [];
    if(this.data.UserNameIndexes){
      row = this.data.UserBackups.filter((e) => e.text.toLowerCase().indexOf(this.data.UserNameIndexes.toLowerCase()) != -1)
    }else{
      row = this.data.UserBackups
    }
    this.setData({
      cognizance: this.data.UserNameIndexes,
      UserList: row
    })
  },

可能很多人会奇怪为什么要toLowerCase()
其实很简单因为indexOf是不区分大小写的
就是A和A可以匹配但 A和a就不行了
然后我们修改前面的页面控件代码

<van-popup
  show="{{ UserSwitch }}"
  closeable
  position="bottom"
  custom-style="height: 45%"
  bind:close="UserShutdown"
>
    <van-search
      style="width:100%;display: block;"
      value="{{ UserNameIndexes }}"
      placeholder="请输入用户名"
      use-action-slot
      bind:change="setUserNameIndexes"
      bind:search="UserVague"
    >
      <view
         slot="action"
         bind:tap="UserVague"
         style="color:#1296db;"
      >
         搜索
      </view>
    </van-search>
   <view class = "grafting" wx:if = "{{ UserList.length == 0 }}">无数据</view>
   <van-picker
      show-toolbar
      wx:if = "{{ UserList.length != 0 }}"
      title="请选择库位"
      columns="{{ UserList }}"
      bind:cancel="UserShutdown"
      bind:confirm="UserIdentification"
   />
</van-popup>

然后我们的页面效果机会变成这样
![在这里插入图片描述](https://img-blog.csdnimg.cn/47ed7bb64c6c48e2be7f72801bbd9c20.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6aOe6Iqx
大家可以搜索一下这个事件还是很好用的

最后我们需要修改一下UserIdentification事件不然就会出BUG

 UserIdentification(event){
    let id = event.detail.value.id;
    let UserBackups = this.data.UserBackups;
    let UserList = [];
    for(let i = 0;i < UserBackups.length;i++){
      if(UserBackups[i].id == id){
        console.log(UserBackups[i]);
        UserBackups[i].disabled = true;
      }else{
        UserBackups[i].disabled = false;
      }
      if(this.data.cognizance){
        if(UserBackups[i].text.toLowerCase().indexOf(this.data.cognizance.toLowerCase()) != -1){
          UserList.push(UserBackups[i]);
        }
      }else{
        UserList.push(UserBackups[i]);
      }
    }
    this.setData({
      UserList: UserList,
      UserBackups: UserBackups
    })
  },