实现列表搜索

目的：（Uview）实现列表搜索，包含中英文及大小写。(在搜索时，将搜索条件和搜索目标Arr全用toLowerCase()方法转为小写)

效果图： image.png
代码实现：

<template>
       <u-popup v-model="popupShow" mode="bottom" :closeable="true" :mask-close-able="false" border-radius="20"
            height="70vh" @close="popupClose">
            <u-search class="searchBox" placeholder="请输入国家的名称搜索" v-model="searchMsg" shape="round" action-text=""
                :clearabled="false" bg-color="#E2E4E5" @change="searchChange(searchMsg)">
            </u-search>

            <view class="countryBox">
                <view class="countryItem" v-for="(item,i) in filterMsg" :key="i" @click="getCountryItemInfo(item)">
                    <view>国家中文</view>
                    <view>国家英文</view>
                </view>
            </view>
        </u-popup>
</template>
<script>
  export default {
    data(){
        return{
            filterMsg: [],
            countryList: [],
        }
    },
    methods:{
            /** 获取所有国籍 */
            async initNationality() {
                const {
                    Body,
                    Status
                } = await this.$MyRequest()
                if (Status === '200') {
                    this.filterMsg = this.countryList = Body
                    // this.filterMsg = this.countryList
                }
            },

             /** 国籍搜索 */
            searchChange(queryString) {
                let lowerQueryString = queryString?.toLowerCase()
                this.filterMsg = []

                this.countryList.map(item => {
                    let lowerItemCn = item.CountryCn.toLowerCase()
                    let lowerItemEn = item.CountryEn.toLowerCase()
                    if (lowerItemCn.indexOf(lowerQueryString) !== -1 || lowerItemEn.indexOf(lowerQueryString) !== -1) {
                        this.filterMsg.push(item)
                    }
                })
            },
    }
}
</script>