Vue3 模糊搜索筛选

Vue3 模糊搜索筛选

环境： vue3+ ts+element plus
目标： 输入框输入内容，对展示的列表进行模糊搜索筛选匹配的内容。

代码如下：

<div style="margin-top: 50px">
    <el-input v-model="valueInput" size="large" style="width: 200px" placeholder="请输入" @keyup="searchFn">el-input>
    <ul>
        <li v-for="item in valList">{{item}}li>
    ul>
div>
1
2
3
4
5
6

<script lang="ts" setup>
import {computed, ref} from 'vue'

const list=['adfn','acddfN','23DNF','n3BF7','3bedf']
const valList = ref([])
const valueInput=ref('')
const searchFn =computed(() => {
    valList.value = []
    list.forEach((item: any) => {
        if (item.search(valueInput.value)!== -1) {
            valList.value.push(item)
        }
    })
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

输入内容：

注意：此时搜索是区分大小写的，接下来改造一下，让输入框搜索可以不区分大小写进行筛选
改造代码如下：

const searchFn =computed(() => {
    valList.value = []
    list.forEach((item: any) => {
    	 /* RegExp对文本进行模式匹配的“搜索和替换”功能  i就是执行不区分大小写的匹配 */
        if (item.search(new RegExp(valueInput.value, 'i'))!== -1) {
            valList.value.push(item)
        }
    })
})
1
2
3
4
5
6
7
8
9

效果：