选择框实现搜索过滤

html代码

<nz-select formControlName="no" [nzSize]="'default'" (nzOnSearch)="customerFilter($event)"
              [nzNotFoundContent]="'无法找到'" nzShowSearch allowClear="true">
   <nz-option *ngFor="let a of tempList" [nzLabel]="a.label" [nzValue]="a.value"></nz-option>
</nz-select>

ts代码

qryAll() {//查询所有,获取list,初始化到选择框
    const params = {xxx: 'xxx'}
    this.service.getAllCustomer(params).subscribe(_data => {
      this.customerList = _data['retList'];
      this.tempList = _data['retList'];
    })
  }
  //搜索
  tempList = [];
  customerFilter(no) {
    this.tempList = [];
    this.tempList.splice(0, this.tempList.length);
    this.customerList.forEach(element => {
        if (element.customerName.indexOf(no) !== -1)
            this.tempList.push(element);
    });
  }

要把qryAll()放到onInit()中,刚加载时就执行。

扩展:splice()方法使用

splice() 方法用于添加或删除数组中的元素。
语法:array.splice(index,howmany,item1,…,itemX)
index 必输(number型,开始插入或删除的数组元素的下标)
howmany 选输(number型,表示个数,输则表示删除)
item1,itemX 选输(要添加到数组的新元素)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现带有模糊搜索的下拉选择,可以使用以下步骤: 1. 创建一个输入和下拉选择组件,并将它们放置在一起。 2. 给输入绑定一个 "keyup" 事件,当用户输入时,触发模糊搜索功能。 3. 在 "keyup" 事件处理程序中,获取输入的值,并将其与下拉选择中的所有选项进行比较。 4. 如果选项中包含输入的值,则将该选项添加到一个新的数组中。 5. 将新数组中的选项更新到下拉选择中,以显示符合条件的选项。 6. 当用户从下拉选择选择一个选项时,将所选的值更新到输入中。 7. 最后,当用户清空输入时,将下拉选择中的所有选项显示出来。 具体实现过程可以参考以下代码: ```html <!-- 输入和下拉选择组件 --> <template> <div> <input type="text" v-model="searchText" @keyup="searchOptions" /> <select v-model="selectedOption"> <option v-for="(option, index) in filteredOptions" :key="index" :value="option">{{ option }}</option> </select> </div> </template> <script> export default { data() { return { options: ['apple', 'banana', 'orange', 'pear', 'peach'], // 所有选项 filteredOptions: [], // 模糊搜索后的选项 searchText: '', // 输入的值 selectedOption: '', // 当前选择的选项 }; }, methods: { searchOptions() { // 获取输入的值,并将其转为小写字母 const searchText = this.searchText.toLowerCase(); // 过滤符合条件的选项,并将它们添加到新数组中 this.filteredOptions = this.options.filter(option => option.toLowerCase().includes(searchText)); // 如果输入中的值为空,则显示所有选项 if (!searchText) { this.filteredOptions = this.options; } }, }, }; </script> ``` 上述代码中,我们首先定义了一个包含所有选项的数组 `options`,以及一个空数组 `filteredOptions`。在 `searchOptions` 方法中,我们获取输入的值,并将其转为小写字母,然后通过 `filter` 方法过滤符合条件的选项,并将它们添加到 `filteredOptions` 数组中。最后,我们在模板中使用 `v-for` 指令将 `filteredOptions` 数组中的选项渲染到下拉选择中。同时,我们也将 `selectedOption` 属性绑定到下拉选择上,以便在用户选择一个选项时,将其值更新到输入中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值