小程序下拉框可模糊查询

引用了vant  Weapp,详情 快速上手 - Vant Weapp (gitee.io)

子组件

<view>
  <view class="main-all-right" bind:tap="openSwitch">{{textValue==''?'请选择工程':textValue}}</view>
<van-popup position="bottom" show="{{ UserSwitch }}" custom-style="height:60vh;" close-on-click-overlay="false" closeable="true" bind:close="onClose">
    <van-search
      style="width:80%;display: block;"
      model:value="{{ searchKey }}"
      placeholder="请输入用户名"
      bind:change="onSearch"
      bind:clear="resetColumns"
    >
    </van-search>
   <view class = "grafting" wx:if = "{{ UserList.length == 0 }}">无数据</view>
   <van-picker
      show-toolbar
      wx:if = "{{ UserList.length != 0 }}"
      columns="{{ UserList }}"
      bind:cancel="UserShutdown"
      bind:confirm="UserIdentification"
      value-key="{{roleName1}}"
   />
</van-popup>
</view>

 

// components/FuzzyQuery/FuzzyQuery.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    UserList: {
      type: Array,
      value: []
    },
    UserBackups: {
      type: Array,
      value: []
    },
    roleName1: {
      type: String,
      value: ''
    },
    textValue: {
      type: String,
      value: ''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    textValue: '',
    defaultIndex: 0,
    UserSwitch: false,
    searchKey: '',
    UserList: [],
    UserBackups: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    UserShutdown() {
      this.setData({
        UserSwitch: false
      })
      this.resetColumns()
    },
    openSwitch() {

      this.setData({
        UserSwitch: true,
        searchKey: '',
        UserBackups: this.data.UserList
      })
    },
    resetColumns() {
      this.setData({
        searchKey: '',
        UserList: this.data.UserBackups
      })
    },
    //点击确定搜索时触发事件
    onSearch() {
      console.log(this.data.UserBackups, 'this.data.UserBackups');
      let row = [];
      if (this.data.searchKey.length > 0) {
        this.data.UserBackups.filter(
          (e) => {
            if (e.projectName.indexOf(this.data.searchKey.toLowerCase()) != -1) {
              row.push(e)
            }
          })
      } else {
        row = this.data.UserBackups
      }
      this.setData({
        cognizance: this.data.searchKey,
        UserList: row
      })
    },

    onClose() {
      this.setData({
        UserSwitch: false
      })
    },
    UserIdentification(event) {
      console.log(event, 'event');
      let id = event.detail.value.id;
      let index = event.detail.index
      let UserBackups = this.data.UserBackups;
      this.setData({
        textValue: this.data.UserBackups[index].projectName,
        UserSwitch: false,
        UserList: UserBackups,
      })
      this.triggerEvent('myevent', id) //传值给父组件
    },
  }
})

 

父组件引用子组件

 <fuzzy bind:myevent="onMyevent" UserList="{{UserList}}"  roleName1="projectName"></fuzzy>

父组件获取子组件的值 

 onMyevent(e){
  // 工程id
  console.log(e.detail,'e');
  this.setData({
    projectId:e.detail
  })
},

{
  "usingComponents": {
    "fuzzy":"../../components/FuzzyQuery/FuzzyQuery"
  }
}