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) => { 
    //处理逻辑
 }
相关推荐
风吹落叶花飘荡19 分钟前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则19 分钟前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele1 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4531 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6731 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友1 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir1 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴2 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子2 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead2 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构