Vue3搭配Element Plus 实现候选搜索框效果

直接上代码

复制代码

    <el-col :span="14" class="ipt-col">
        <el-input v-model="projectName" class="w-50 m-2"  @input="inputChange" @focus="inputFocusFn" @blur="inputBlurFn" placeholder="请输入项目名称" clearable>
        <template #suffix>
        <el-icon class="el-input__icon">
        <search />
        </el-icon>
        </template>
        </el-input>
        <!-- 搜索候选框 -->
        <div v-show="isShow" class="hou-bu-box">
        //selectedCity这个是选中候选框数据的处理方法 
        <p v-for="(item,index) in cityArr" :key="index" @click="selectedCity(item.id)" st    yle="cursor: pointer">{{ item.label }}</p>
        </div>
    </el-col>

<el-input v-model="projectName" class="w-50 m-2" @input="inputChange" @focus="inputFocusFn" @blur="inputBlurFn" placeholder="请输入项目名称" clearable>

解释一下在值改变时将数据进行过滤失去焦点隐藏候选框获取焦点将完整数据渲染到候选框中

复制代码

// 搜索框数据
const projectName = ref(null)

//控制候选框显示隐藏
const isShow = ref(false)

// 渲染到候选框的数据
const cityArr = ref(null)

// 搜索框Change事件
const inputChange = () => { 
        //搜索框值为空 候选框关闭
    if (projectName.value == '') {
        isShow.value = false
    } else {
          //输入框输入的时候 遍历总数据 将过滤出来的数据放入其中
        if (cityOptions.value.length > 0) { 
            cityArr.value = []
            cityOptions.value.forEach((item, index, array) => {
                if (item.label.indexOf(projectName.value) >= 0) { 
                    cityArr.value.push(item)
                }
            })
            // cityOptions.value = cityArr
        }
        isShow.value = true
        // getTreeListFn()
    }
}
// 搜索框聚焦事件 请求跟下面获取总数据请求一样 不要问我为什么不直接调用下面的方法 因为我这个是项目里方法 好多数据我都删除了 下面的请求里面有好多逻辑处理 不好直接调用 我就又书写了一遍
const inputFocusFn = () => { 
    isShow.value = true
        let params = {
        name: projectName.value
    }
    getTreeList(params).then(res => {
        if (res.code == 200) {
             cityArr.value = res.data
        }
    })
    //   getTreeListFn()
}
// 搜搜框失焦事件
const inputBlurFn = () => { 
     isShow.value = false
}

// 获取总的项目树数据
function getTreeListFn() { 
    let params = {
        name: projectName.value
    }
    getTreeList(params).then(res => { 
        if (res.code == 200) { 
               //候选框总数据
            cityOptions.value = res.data
        }
    })
}
//selectedCity这个是选中候选框数据的处理方法 
const selectedCity = (id) => { 
    //处理逻辑
 }