因为项目中使用到了elementui所以利用了elementui的el-autocomplete组件来实现输入关键字弹出下拉列表
<template><el-autocompletestyle="width: 100%"class="inline-input"v-model="state":fetch-suggestions="querySearch_front"placeholder="请输入内容":trigger-on-focus="false"@select="handleSelect"></el-autocomplete><!-- 页面部分结构 --> <div v-for="(item, index) in nginxServerData" :key="index"><el-collapse @change="handleChange(index)"><el-collapse-item ref="item" :title="item.name"></el-collapse-item></el-collapse></div></template>
export default {name: '...',data() {return {state: '',nginxServerData：requestData // 这个requestData只是个占位符要换成自己的数据}},methods: {// 输入框查询匹配querySearch_front(queryString, cb) {let restaurants = []// 我后端请求回来的数据是个数组放在了nginxServerData的for (let i = 0; i < this.nginxServerData.length; i++) {// 因为列表框中的数据是必须要用value这个属性的 所以我这里做了处理restaurants.push({'value': this.nginxServerData[i].name})}let results = queryString ? restaurants.filter(this.createFilter_front(queryString)) : restaurants// 调用 callback 返回建议列表的数据cb(results)},createFilter_front(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1) // 上面这里进行了全局查询所以indexOf条件是 > -1，如果要以开头匹配关键字的话直接把 > -1换成=== 0 就可以了}},// 点击下拉列表关键字页面滚动到所在位置handleSelect(item) {// 获取每一个ref下的元素，得到的是数组let list = this.$refs.itemlist.map(el => {let arr = []// 打印el查看控制台发现下面的$options.propsData.title跟点击列表得到的参数item.value值是一致的(每个人需求不一样最好打印看下item下面有什么)arr.push(el.$options.propsData.title)let flag = this.contains(arr, item.value)if(flag) {// 匹配到的话就获取当前这个节点距离顶部的距离let top = el.$el.offsetTopdocument.documentElement.scrollTop = top}})}// 比较数组中是否有某字符串contains(arr, str) {var i = arr.lengthwhile (i--) {if (arr[i] === str) {return true}}return false},}}
vue结合elementui实现输入框输入关键词显示下拉列表点击列表中关键字页面滚动到关键字所在位置
